Rechart's radar charts is not displaying properly

Question

I have 3 charts.

1. Motivational Interview
2. Tech Interview
3. Coding Assignment

I am using Rechart in React app. I am rendering 3 charts with two sets of data(fetching from an api). But one chart (Coding assignment) is not displaying. (It displays the else mesage I set even though it fetched data and works until combinedData portion but it's not setting the state!) But If I remove any of two charts (1/2) or remove both then Coding assignment Chart renders perfectly fine. What am I doing wrong?

Here's my code. Parent Component:

 <div className="flex">
        <RadarChartComponent
          skillUrl={`${conf.API_BASE_URL}/prospect/soft-skills/interview/${id}`}
          avgMarksUrl={`${conf.API_BASE_URL}/prospect/get/softskill/avgmarks/interview`}
          title="Motivational Interview"
        />
        <RadarChartComponent
          skillUrl={`${conf.API_BASE_URL}/prospect/hard-skills/interview/${id}/tech-interview`}
          avgMarksUrl={`${conf.API_BASE_URL}/prospect/get/avgmarks/tech-interview`}
          title="Tech Interview"
        />
        <RadarChartComponent
          skillUrl={`${conf.API_BASE_URL}/prospect/assignment/interview/${id}/coding-assignment`}
          avgMarksUrl={`${conf.API_BASE_URL}/prospect/get/avgmarks/coding-assignment`}
          title="Coding Assignment"
        />
      </div>

And here is my Radar chart component.

function RadarChartComponent({
  skillUrl,
  avgMarksUrl,
  title,
}: {
  skillUrl: string;
  avgMarksUrl: string;
  title: string;
}) {
  const [loader, setLoader] = useState(false);
  const [skillData, setSkillData] = useState<any[]>([]);

  useEffect(() => {
    console.log(`welcome to radar chart ${title}`);
    async function fetchData() {
      try {
        setLoader(true);

        // Fetch soft skill data
        const softSkillResponse = await serverFetch("get", skillUrl);
        const skillData: any[] = softSkillResponse;
        console.log(`checking skills ${title}`, softSkillResponse)

        // Fetch average marks data
        const avgMarksResponse = await serverFetch("get", avgMarksUrl);
        const avgMarksData: any[] = avgMarksResponse;
         console.log(`checking avg skills ${title}`, avgMarksData);
        //Combine the two datasets
        const combinedData: any[] = skillData.map((skill, index) => {
          return {
            ...skill,
            averageMarks: avgMarksData[index].marks,
          };
        });
        setSkillData(combinedData);
        console.log(`"combined data" ${title}`, skillData)

        setLoader(false);
      } catch (error) {
        setLoader(false);
      }
    }

    fetchData();

  }, []);

  return (
    <div className="chart-container text-center mb-1">
      <h2 className="chart-title">{title}</h2>

      <div style={{ width: "100%", height: "200px" }}>
        {loader ? (
          <Skeleton.Avatar size={164} active />
        ) : (
          <>
            {skillData.length > 0 ? (
              <ResponsiveContainer>
                <RadarChart
                  cx="50%"
                  cy="50%"
                  outerRadius="80%"
                  data={skillData}
                >
                  <PolarGrid />
                  <PolarAngleAxis dataKey="name" tick={{ fontSize: "small" }} />
                  <PolarRadiusAxis domain={[0, 10]} />
                  {/* 
                    //! TODO: Need to fix the tooltip!
                  <Tooltip
                    cursor={{ strokeDasharray: "3 3" }}
                    content={<CustomRadarTooltip />}
                  />
                  */}

                  <Radar
                    name="Soft Skills"
                    dataKey="marks"
                    stroke="#0088FF"
                    fill="#0088FF"
                    fillOpacity={0.6}
                  />

                  <Radar
                    name="Average Marks"
                    dataKey="averageMarks"
                    stroke="#FF0000"
                    fill="#FF0000"
                    fillOpacity={0.6}
                  />
                </RadarChart>
              </ResponsiveContainer>
            ) : (
              <p>No data available for {title}.</p>
            )}
          </>
        )}
      </div>
    </div>
  );
}