How can I load external data in React SSR

I’m new to React and I’m making React SSR page. Perfectly working (it’s almost stastic page yet but use JSON datas). Why I can’t here use in my compoment Suspense why I’ve load JSON data?

import React, { Suspense, useEffect, useState } from 'react';
import './interfaces/types';

interface ProductProperties {
    [key: string]: {
        title: string;
        comments: {
            comment1: string;
            comment2: string;
            comment3: string;
            comment4: string;
            comment5: string;
        };
    };
}

interface ProductPropertyProps {
    id: string;
    rating: number;
    comment?: string;
}

const ProductProperty: React.FC<ProductPropertyProps> = ({ id, rating, comment }) => {
    const [property, setProperty] = useState<ProductProperties | null>(null);

    useEffect(() => {
        import('../../data/productProperties.json')
            .then((json) => {
                setProperty(json.default);
            })
            .catch((error) => {
                console.error("Failed to load JSON file:", error);
            });
    }, []);

    if (property === undefined) {
        return null; // Or return a loading spinner or placeholder
    }

    if (!property) {
        return null; // Or return a loading spinner or placeholder
    }

    const propertyDefinition = property[id];

    // TODO: Handle the case when the property definition is not found
    if (!propertyDefinition) {
        console.error(`No property definition found for id ${id}`);
        return null; // Or return a default value or error message
    }

    const title = propertyDefinition.title;
    // Použitie vlastného komentára ak je k dispozícii, inak použitie predvoleného z definície
    const finalComment = comment || ((propertyDefinition.comments as unknown) as { [key: string]: string })[`comment${rating}`];

    return (
        <Suspense fallback={<div>Loading...</div>}>
            <div className="product-property">
                <div className="product-property-title">{title}</div>
                <div className="product-property-rating">
                    {[...Array(5)].map((_, index) => (
                        <i key={index} className={`star star-${index < rating ? 'filled' : 'outline'}`}></i>
                    ))}
                </div>
                <div className="product-property-comment">{finalComment}</div>
            </div>
        </Suspense>
    );
}

export default ProductProperty;

But in App.tsx I can use it

// App.tsx
import React, { Suspense } from 'react';
import Product from './components/product/Product';
import productData from './data/productData.json';

const App: React.FC = () => {

  // This will be used later if we want to update the product data
  //const [productDataState, setProductData] = useState<ProductData[]>(productData);

  return (
    <>
      {productData.map((product) => (
        // Title of product must be unique and therefore can be used as key
        <Suspense key={product.title} fallback={
          <div className='product-container-fallback'>
            <div>Nahrhráva sa produkt. Prosíme chvíľu strpenia</div>
          </div>
        }>
          <button style={{ border: 'none', background: 'none', padding: 0, margin: 0 }}>
            <Product productInfo={product} />
          </button>
        </Suspense >
      ))
      }
    </>
  );
};

export default App;

It’s some possible? I know that Vite SSR has some limitations yet, but code is so nice generated…

Or…. The page it’s working but I have error in browser console:

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Or

Warning: An error occurred during hydration. The server HTML was replaced with client content in .

Thanks for any advice