contraTest.tsx

import React, { Suspense, useState, useEffect } from 'react'; // React should also be imported

const SuspensefulUserProfile = ({ userId } :{ userId: number }) => { //since this file extension is .tsx then type should assign else this will throw error
  const [data, setData] = useState({});
  useEffect(() => {
    fetchUserProfile(userId).then((profile) => setData(profile));
  }, [userId]) // we should not add setData as a dependency here, userId is enough
  return (
    <Suspense fallback={<Loading /> || null}> //fallback should always be here
      <UserProfile data={data} />
    </Suspense>
  );
};

interface MyObject {
  name: string;
  email: string;
}
const UserProfile = ({data}: { data: MyObject }) => {  //since this file extension is .tsx then type should assign else this will throw error
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
const UserProfileList = () => (
  <>
    <SuspensefulUserProfile userId={1} />
    <SuspensefulUserProfile userId={2} />
    <SuspensefulUserProfile userId={3} />
  </>
);