Javascript – Final Return Wont Render in React

All of my logs are showing up with data in it, initially they are undefined, but then once the data is retrieved from the prop they show up properly… However, it stays on Loading…

Is there something wrong with my structure:

 import React, { useEffect, useState } from 'react';

    import './styleTopTen.css'; 

    function TopTenView({ topTenData }) {
      const baseUrl = import.meta.env.VITE_MOP_BASE_URL;
      const defaultPic = '/images/pic1.png';

      const [isReady, setIsReady] = useState(false);

      useEffect(() => {
        if (topTenData && Array.isArray(topTenData) && topTenData.length > 0) {
          setIsReady(true);
        }
      }, [topTenData]);

      if (!isReady) {
        return <div>Loading...</div>; // Or null if you don't want to render anything
      }

      console.log('ttv', topTenData);
    console.log('isReady',isReady)
    console.log('after TTV if', topTenData);

      return (
        
        <div className="top-ten-container">
        <div className="title">TOP 10</div>
        <div className="entities-container">
          {topTenData.map((entity, index) => (
            <div key={`top-entity-${index}`} className="entity-circle">
              <img src={entity.entity_pic || defaultPic} alt={entity.entity_name} className="entity-img" />
              <div className="entity-name">{entity.entity_name}</div>
            </div>
          ))}
        </div>
      </div>
      );
    }

    export default TopTenView;