Contra: React JS

/*
  Answers:
  1 - React is not being imported
  2 - When calling setData at line 11 was overring the existing profile
  3 - userEffect was watching at setData instead of data
  4 - Suspense was being called without fallback with is required
  Extras (Improviments):
  1 - Considering that UserProfileList is the main component from the respective file
  was added export default to be used externaly
  2 - Calling SuspensefulUserProfile was changed from manually calling 3 to mapping a array with ids and interating them
*/
import React, { Suspense, useState, useEffect } from 'react';

const SuspensefulUserProfile = ({ userId }) => {
  const [data, setData] = useState({});
  useEffect(() => {    
    fetchUserProfile(userId).then((profile) => setData([...data, profile]));
  }, [userId]);
  return (
    <Suspense fallback={<h1>Loading profile...</h1>}>
      <UserProfile data={data} />
    </Suspense>
  );
};
const UserProfile = ({ data }) => {
  return (
    <>
      <h1>{data.name}</h1>
      <h2>{data.email}</h2>
    </>
  );
};
export default UserProfileList = () => (
  <>
    {[1,2,3].map(userId => (    
      <SuspensefulUserProfile key={userId} userId={userId} />
    ))}    
  </>
);