My line schedule does not work although I get data from GoogleSheets developer console

Question

I'm trying to create a project that takes data from GoogleSheet and outputs it to the website as a linear graph, but somehow it doesn't work on the website, even though the graph itself is, and the data is in console.log, but I can't understand why the lines on the diagram don't work.

import React, { useState, useEffect } from 'react';
import ChartComponent from './chart';
import fetchDataFromSheets from './spreadsheet'
import './Style.css'

const App = () => {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    const credentials = require('./service-account.json');
    const sheetId = 'ID GoogleSheet';

    fetchDataFromSheets(sheetId, credentials)
      .then(data => {
        console.log(data);
        setChartData(data);
      });
  }, []);

  return (
    <div>
      <div className='chart-container'>
        <ChartComponent data={chartData} />
      </div>
    </div>
  );
};

export default App;

import { Chart as ChartJS} from 'chart.js/auto';
import { Line } from 'react-chartjs-2';


const ChartComponent = ({ data }) => {
  const chartData = {
    labels: data.map(d => d.Date),
    datasets: [
      {
        label: 'PriceBefore',
        data: data.map(d => d.PriceBefore),
        fill: false,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
      },
      {
        label: 'PriceAfter',
        data: data.map(d => d.PriceAfter),
        fill: false,
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
      }
    ]
  };

  return <Line data={chartData} />;
};

export default ChartComponent

import '../interface/Style.css'
import App from './logic'


export default function Interface() {
  return (
    <div className='container'>

      <header className='header'>
        
      </header>

      
      <div className='graph'></div>

      <footer className='footer'>
        <App />
        
      </footer>
   </div>
  );
}

import { GoogleSpreadsheet } from 'google-spreadsheet';
import { JWT } from 'google-auth-library';

async function fetchDataFromSheets(sheetId) {
  const serviceAccountAuth = new JWT({
    email: "PrivateEmail",
    key: "-----BEGIN PRIVATE KEYEND PRIVATE KEY-----\n",
    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
  });

  const doc = new GoogleSpreadsheet(sheetId, serviceAccountAuth);

  await doc.loadInfo();
  const sheet = doc.sheetsByIndex[0]; // 

  const rows = await sheet.getRows();
  console.log(rows)

  return rows.map(row => ({
    date: row['Date'],
    price: row['Price']
  }));
}

export default fetchDataFromSheets;

And my JSON file

{
  "name": "my-stone-market",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "browserify": "^17.0.0",
    "chart.js": "^4.4.1",
    "google-auth-library": "^9.4.1",
    "google-spreadsheet": "^4.1.1",
    "net": "^1.0.2",
    "querystring-es3": "^0.2.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-social-icons": "^6.7.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "assert": "^2.1.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "process": "^0.11.10",
    "react-app-rewired": "^2.2.1",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.3"
  }
}