imported component is not displayed on output

Question

i've a component that i import, but its not displayed on the page.

this is my app.js file. i imported the <LineGraph/>component but it is not getting displayed properly on the browser.

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

import {
MenuItem,
FormControl,
Select,
Card,
CardContent,
} from "@material-ui/core";
import InfoBox from "./infoBox";
import Table from "./table";
import "./App.css";
import { sortData } from "./util";
import LineGraph from "./LineGraph";

const App = () =\> {
const \[countries, setCountries\] = useState(\[\]);
const \[country, setCountry\] = useState("worldwide");
const \[countryInfo, setCountryInfo\] = useState({});
const \[tableData, setTableData\] = useState(\[\]);
const \[casesType, setCasesType\] = useState("cases");

useEffect(() =\> {
fetch("https://disease.sh/v3/covid-19/all")
.then((response) =\> response.json())
.then((data) =\> {
setCountryInfo(data);
});
}, \[\]);

useEffect(() =\> {
const getCountriesData = async () =\> {
fetch("https://disease.sh/v3/covid-19/countries")
.then((response) =\> response.json())
.then((data) =\> {
const countries = data.map((country) =\> ({
name: country.country,
value: country.countryInfo.iso2,
}));
const sortedData = sortData(data);
setTableData(sortedData);
setCountries(countries);
});
};

    getCountriesData();

}, \[\]);

const onCountryChange = async (event) =\> {
const countryCode = event.target.value;
console.log("s", countryCode);
setCountry(countryCode);

    const url =
      countryCode === "worldwide"
        ? "https://disease.sh/v3/covid-19/all"
        : `https://disease.sh/v3/covid-19/countries/${countryCode}`;
    
    await fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setCountry(countryCode);
    
        setCountryInfo(data);
      });

};
console.log("CuntryInfo: ", countryInfo);

return (
\<div className="App"\>
\<div className="app__left"\>
\<div className="app__header"\>
\<h1\>COVID-19 Tracker\</h1\>
\<FormControl className="app__dropdown"\>
\<Select
variant="outlined"
onChange={onCountryChange}
value={country}
\\>
\<MenuItem value="worldwide"\>Worldwide\</MenuItem\>
{countries.map((country) =\> (
\<MenuItem value={country.value}\>{country.name}\</MenuItem\>
))}
\</Select\>
\</FormControl\>
\</div\>

        <div className="app__stats">
          <InfoBox
            title="Coronavirus cases"
            cases={countryInfo.todayCases}
            total={countryInfo.cases}
          />
          <InfoBox
            title="Recovered"
            cases={countryInfo.todayRecovered}
            total={countryInfo.recovered}
          />
          <InfoBox
            title="Deaths"
            cases={countryInfo.todayDeaths}
            total={countryInfo.deaths}
          />
      
        </div>
    
      </div>
      <Card className="app__right">
        <CardContent>
          {/* Table */}
          <h3>Live Cases by country</h3>
          <Table countries={tableData} />
          {/* Graph */}
          <h3>Word Wide New </h3>
          <LineGraph casesType={casesType} />
        </CardContent>
      </Card>
    </div>

);
};

export default App;

and My content of LineGraph.js :

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import numeral from "numeral";

const options = {
  legend: {
    display: false,
  },
  elements: {
    point: {
      radius: 0,
    },
  },
  maintainAspectRatio: false,
  tooltips: {
    mode: "index",
    intersect: false,
    callbacks: {
      label: function (tooltipItem, data) {
        return numeral(tooltipItem.value).format("+0,0");
      },
    },
  },

};

const buildChartData = (data, casesType) => {
  let chartData = [];
  let lastDataPoint;
  for (let date in data.cases) {
    if (lastDataPoint) {
      let newDataPoint = {
        x: date,
        y: data[casesType][date] - lastDataPoint,
      };
      chartData.push(newDataPoint);
    }
    lastDataPoint = data[casesType][date];
  }
  return chartData;
};

function LineGraph({ casesType }) {
  const [data, setData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          let chartData = buildChartData(data, casesType);
          setData(chartData);
          console.log(chartData);
          // buildChart(chartData);
        });
    };

    fetchData();
  }, [casesType]);

  return (
    <div>
      {data?.length > 0 && (
        <Line
          data={{
            datasets: [
              {
                backgroundColor: "rgba(204, 16, 52, 0.5)",
                borderColor: "#CC1034",
                data: data,
              },
            ],
          }}
          options={options}
        />
      )}
    </div>
  );
}

export default LineGraph;

When I import the LineGraph.js component in the App.js file, the output is not displayed without any error.

in console error is :

react-dom.development.js:25830 
        
       Uncaught Error: "category" is not a registered scale.