Chart.jsx TypeError: Cannot read property 'length' of undefined COVID-19 Tracker Application

DESCRIPTION Hello, can someone help me find this error I don't understand it. This code comes from a youtube video that tells you how to do a covid tracker. Here I try ad do the chart part although it doesn't let me use the ".length" see error below. Can someone help me please?

HERE IS HOW I STRUCTURED MY FILES

HERE is MY ERROR

CHART.JS file

import React, { useState, useEffect } from 'react';
import { fetchDailyData } from '../../api';
import { Line, Bar } from 'react-chartjs-2';

import styles from './Chart.module.css';

const Chart  = () => {
    const   [dailyData,setDailyData ] = useState([]);

    useEffect(()=>{
        const fetchAPI =  async () => {
          setDailyData(await fetchDailyData());
        }
 
        fetchAPI();
 
    },[]);
  

    const lineChart = (
        dailyData.length
        ? (
            <Line
            data = {{
                labels: dailyData.map(({ date }) => date),
                datasets: [{
                    data: dailyData.map(({ confirmed }) => confirmed),
                    label: 'Infected',
                    borderColor: '#3333ff',
                    fill: true,
                }, {
                    data: dailyData.map(({ deaths }) => deaths),
                    label: 'Deaths',
                    borderColor: 'red',
                    backgroundColor: 'rgba(255, 0, 0, 0.5)',
                    fill: true,
                }],

            }}
            />) : null
    );

    return (
        <div className = {styles.container}>
            {lineChart}
        </div>
    )
}

export default Chart; 

Index.js file (of api)

import axios from 'axio[![enter image description here][2]][2]s';

const url = 'https://covid19.mathdro.id/api'

export const fetchData = async () => {
    
    try{
        const { data: {confirmed, recovered, deaths, lastUpdate} } = await axios.get(url);

        return { confirmed, recovered, deaths, lastUpdate, };
    }catch (error){
    }
}

export const fetchDailyData = async ()=> {
    try{
        const {data} = await  axios.get('${url}/daily');

        const modifiedData = data.map((dailyData) => ({
            confirmed: dailyData.confirmed.total,
            deaths: dailyData.deaths.total,
            date: dailyData.reportDate,
        }));

    return modifiedData;
    }catch(error){

    }
}