I keep getting an error while using youtube v3 api with RAPIDAPI

I was using the javascript mastery API course on youtube to try and create a youtube clone, but while trying to fetch videos using the api i got somer errors and the react app stopped rerenderng. The error occured after i put in this exact line {item.id.videoId && <VideoCard video={item}/>}

Here's my code for the video component

import {Stack, Box} from '@mui/material';import {ChannelCard, VideoCard} from './';const Videos = ({videos}) => {  return (<Stack direction="row" flexWrap="wrap" justifyContent="start" gap={2}  >        {videos.map((item, idx) => (<Box key={idx}>                {item.id.videoId && <VideoCard video={item}/>}</Box>        ))}</Stack>  )}export default Videos

Here's the error

Videos.jsx:9 Uncaught TypeError: Cannot read properties of undefined (reading 'videoId')    at Videos.jsx:9:1    at Array.map (<anonymous>)    at Videos (Videos.jsx:7:1)    at renderWithHooks (react-dom.development.js:16305:1)    at mountIndeterminateComponent (react-dom.development.js:20074:1)    at beginWork (react-dom.development.js:21587:1)    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)    at invokeGuardedCallback (react-dom.development.js:4277:1)    at beginWork$1 (react-dom.development.js:27451:1