Attempting to use a loading state to stop undefined data

So I know that the data used in a setState call won't be updated until the next render and have looked up plenty to figure out what to do about that. The best solution I kept finding was to use a loading state and set it to true and rendering a loading screen until the data is fetched. But for some reason I can't seem to get this to work for me. I'm curious if there is something I'm missing about this or what is going on but when the paramData is passed to the LineGraph, it never renders out and is undefined when I log it in a useEffect, though it logs again after and has the data. Though if I remove the ? in the line graph data?.entries, there is an undefined error. Here is the component doing the fetch and loading (I originally had a setState for loading, and would set it to true at the start of the useEffect, and set to false at the end to no avail):

import { useState, useEffect } from "react";
import LineGraph from "../components/Graphs/LineGraph";
import TopNav from "../components/General/TopNav";
import Card from "../layout/Card";
import { fetchParamData } from "../utils/dataHandler";

const Parameters = () => {

  const [paramData, setParamData] = useState([]);

  useEffect(() => {
    const fetchParameters = async () => {
      const data = await fetchParamData();
      setParamData(data)
    }

    fetchParameters();
  },[]);

  if(!paramData || paramData === undefined) {
    return (
      <section className="loading">
        <p>
          Loading
        </p>
      </section>
    )
  }

  return (
    <>
      <TopNav />
      <Card>
        <LineGraph data={paramData[0]} />
      </Card>
    </>
  );
}

export default Parameters;

and the LineGraph just in case it's needed:

import { useEffect, useRef } from "react";
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from "recharts";
import colorVars from "../../modules/sassVars.module.scss";


const LineGraph = ({ data }) => {

  useEffect(() => {
    console.log(data);
  },[data]);

  return (
    <div>
      <LineChart width={400} height={200} data={data?.entries} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
        <Line type="monotone" dataKey="parameterLevel" stroke={colorVars.primary20} strokeWidth="5" />
        <CartesianGrid stroke="#ccc" />
        <XAxis />
        <YAxis />
      </LineChart>
    </div>
  );
}

export default LineGraph;

I feel like there is something I'm missing about this, but I'm unsure as to what. I can't seem to find a good answer elsewhere with my searching. Any help would be great! Thanks

 if(paramData.length===0) {
    return (
      <section className="loading">
        <p>
          Loading
        </p>
      </section>
    )
  }

  return (
    <>
      <TopNav />
      <Card>
        {paramaData.length>0 && <LineGraph data={paramData[0]} />}
      </Card>
    </>
  );

check paramData length for loading, also ensure that paramData is not empty before rendering LineGraph