I am using function components with hooks and I am fetching 3 pieces of data related to covid-19 such as date, confirmed cases, and deaths and then storing this data in this component. I would like to plot biaxial line chart with X-axis represented by the date, and the two lines representing confirmed cases and deaths occurred in that specific date. After successfully storing the data I am transforming it into array and then passing it to chart component as an array of object. However, the data is shown on the screen but lines are not rendered.

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;