How do I get recharts to work properly?

See more:

Javascript

ReactJS

Hello All,

I am following the tutorial below and I'm at around 2 hours and 37 minutes:
https://www.youtube.com/watch?v=uoJ0Tv-BFcQ&t=9445s

I am wondering why my charts aren't showing for recharts when my code below is as follows:

import DashboardBox from '@/components/Dashboard';
import { useMemo } from 'react';
import { useGetKpisQuery } from '../../state/api';
import {   ResponsiveContainer,
  AreaChart,
  XAxis,
  YAxis,
  Tooltip,
  Area,} from 'recharts';
import { useTheme } from '@mui/material';



const Row1 = () => {

  const {palette} = useTheme();
    /**to grab and store the data we need to use our api call
     * as shown below
     */
    const {data} = useGetKpisQuery();
    // console.log("🚀 ~ file: Row1.tsx:12 ~ Row1 ~ data:", data)
    /**useMemeo makes sure the revenueExpenses only updates as needed
     * inside we use a callback function with an array to run the function 
     * only when data changes.
     * inside the return, when data exists we call the first element of the
     * array
     */
    const revenueExpenses = useMemo(()=>{

      return(
        data &&
        data[0].monthlyData.map(({month,revenue,expenses}) =>
        {
          return{
            name:month.substring(0,3),
            revenue: revenue,
            expenses: expenses,
          };
        })
      );
    }, [data]);
  return (
    <>
    <DashboardBox gridArea="a">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart
            width={500}
            height={400}
            data={revenueExpenses}
            margin={{
              top: 15,
              right: 25,
              left: -10,
              bottom: 60,
            }}
          >
            <defs>
              <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor={palette.primary[300]}
                  stopOpacity={0.5}
                />
                <stop
                  offset="95%"
                  stopColor={palette.primary[300]}
                  stopOpacity={0}
                />
              </linearGradient>
              <linearGradient id="colorExpenses" x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="5%"
                  stopColor={palette.primary[300]}
                  stopOpacity={0.5}
                />
                <stop
                  offset="95%"
                  stopColor={palette.primary[300]}
                  stopOpacity={0}
                />
              </linearGradient>
            </defs>
            <XAxis
              dataKey="name"
              tickLine={false}
              style={{ fontSize: "10px" }}
            />
            <YAxis
              tickLine={false}
              axisLine={{ strokeWidth: "0" }}
              style={{ fontSize: "10px" }}
              domain={[8000, 23000]}
            />
            <Tooltip />
            <Area
              type="monotone"
              dataKey="revenue"
              dot={true}
              stroke={palette.primary.main}
              fillOpacity={1}
              fill="url(#colorRevenue)"
            />
            <Area
              type="monotone"
              dataKey="expenses"
              dot={true}
              stroke={palette.primary.main}
              fillOpacity={1}
              fill="url(#colorExpenses)"
            />
          </AreaChart>
        </ResponsiveContainer>
      </DashboardBox>
    <DashboardBox gridArea="b"></DashboardBox>
    <DashboardBox gridArea="c"></DashboardBox>
    </>
  )
}

export default Row1;

What I have tried:

I have tried reviewing the code from the source at:

[https://recharts.org/en-US/examples/SimpleAreaChart]

I have tried reviewing differences between my project's source on github at:
finance-app/client/src/scenes/dashboard/Row1.tsx at master · ed-roh/finance-app · GitHub

I have tested reinstalling recharts using npm, and I verified in my package.json file that I had installed it correctly the first time.

And I have tried reviewing answers on stackoverflow, but the it seems the resolutions they have made do not apply.