React function not rerendering with UseEffect and setting state combo

Question

Utilising UseEffect react function and trying to call an API once then render the information, but render post the data being received is not being triggered despite having a call to setState within the fetchdata function call within useEffect. Would appreciate any assistance on how to resolve this?

Code Snippet below

const Function= () => {
 const [data, setData] = useState([]);
 const [error, setError] = useState(null);

 useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch(`URL`);
      const json = await response.json();
      setData(json.data);
    } catch (error) {
      setError(error);
    }
  }
  fetchData();
}, []);

if (error) {
  return <div>An error occurred: {error.message}</div>;
           }
if (!data) {    
  return <div>Loading...</div>;
           }
   return (
     {data&& (
              data?.map((item) => (<Display Logic>)
     }

Answer 1

Seemed there was some old local dependencies, so by running with --force and redownloading them has resolved the issue