Estoy usando componentes de función con ganchos y estoy obteniendo 3 datos relacionados con covid-19, como la fecha, los casos confirmados y las muertes, y luego almaceno estos datos en este componente. Me gustaría trazar un gráfico de líneas biaxiales con el eje X representado por la fecha, y las dos líneas que representan los casos confirmados y las muertes ocurrieron en esa fecha específica. Después de almacenar con éxito los datos, los transformo en una matriz y luego los paso al componente del gráfico como una matriz de objetos. Sin embargo, los datos se muestran en la pantalla pero las líneas no se representan.

 import React, { useEffect, useState } from "react"; import { fetchDailyData } from "../../api"; import classes from './Chart.css'; import { BarChart, Bar, CartesianGrid, XAxis, YAxis,Tooltip,Legend } from 'recharts'; import { LineChart, Line, } from "recharts"; const Chart = ({data:{confirmed,deaths,recovered},country}) => { const [dailyData,setDailyData]= useState([]); useEffect(()=> { const fetchApi = async() => { setDailyData(await fetchDailyData()); } fetchApi(); },[]) const data = [ { name: dailyData.map(({ date }) => new Date(date).toLocaleDateString()), confirmed: dailyData.map((data) => data.confirmed), deaths:dailyData.map((data) => data.deaths) } ]; return ( <div className={classes.container}> <LineChart width={730} height={250} data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="name" /> <YAxis /> <Tooltip /> <Legend /> <Line type="monotone" dataKey="confirmed" stroke="#0095FF" /> <Line type="monotone" dataKey="deaths" stroke="#0095FF" /> </LineChart> </div> ) } export default Chart;