Cannot read properties of undefined (reading '0') at http://localhost:3000/static/js/bundle.js:341:90

Question

I am trying to make a youtube clone with the help of API from Rapid API and the name of the API is Youtube V3 . Link = https://rapidapi.com/ytdlfree/api/youtube-v31?utm_source=youtube.com%2FJavaScriptMastery&utm_medium=referral&utm_campaign=DevRel

In the particular code, I am trying to fetch data, with the help of axios and I named the particular fetch method as 'fetchFromApi', but I getting an error while putting the initial State null in useState Hook. Can anyone help me in this?

import React, { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
import ReactPlayer from 'react-player'
import { Typography, Box, Stack } from '@mui/material'
import { CheckCircle } from '@mui/icons-material'
import { Videos } from './'
import { fetchFromApi } from '../utils/fetchFromApi'

const VideoDetail = ({ channelDetail }) => {

const { id } = useParams();
const [videoDetail, setVideoDetail] = useState(null);

useEffect(() => {
fetchFromApi(`videos?part=snippet,statistics&id=${id}`)
  .then((data) => setVideoDetail(data.items[0]));
}, [id])

const { snippet: { title, channelId, channelTitle } , statistics: {
viewCount, likeCount } } = videoDetail;

return (
<Box minHeight='95vh'>
  <Stack direction={{ xs: 'column', md: 'row' }} >
    <Box flex={1}>
      <Box sx={{ width: '100%', position: 'sticky', top: '86px' }}>
        <ReactPlayer url={`https://www.youtube.com/watch?v=${id}`}
          controls
          className='react-player' />
        <Typography color='#fff' variant='h5' fontWeight='bold' p={2}>
          {title}
        </Typography>
        <Stack direction='row' justifyContent='space-between' py={1} px={2} sx={{ color: '#fff' }}>
        </Stack>
      </Box>
    </Box>
  </Stack>
</Box>
)
}

export default VideoDetail