I have a functional component that renders out the object values

    const MovieItemDetails = (props) => {
  return <div className='item-details'>
    <div>
      <img key={props.movieDetails.id} src={`https://image.tmdb.org/t/p/w1280${props.movieDetails.backdrop_path}`} alt={props.movieDetails.title} className='header-item-image' />
      <a href='#t' className='header-item-name'>{props.movieDetails.title}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${props.movieDetails.poster_path}`} alt={props.movieDetails.title} className='header-item-poster' />
      <h2>{props.movieDetails.genres[0].name}</h2>
    </div>
  </div>
}

I'm trying to access the nested array as seen in the image below

What I want is the genre name of the first array, I have tried {props.movieDetails.genres[0].name}

but I get 'TypeError: Cannot read property '0' of undefined'

I have a functional component that renders out the object values

    const MovieItemDetails = (props) => {
  return <div className='item-details'>
    <div>
      <img key={props.movieDetails.id} src={`https://image.tmdb.org/t/p/w1280${props.movieDetails.backdrop_path}`} alt={props.movieDetails.title} className='header-item-image' />
      <a href='#t' className='header-item-name'>{props.movieDetails.title}</a>
      <img src={`https://image.tmdb.org/t/p/w185/${props.movieDetails.poster_path}`} alt={props.movieDetails.title} className='header-item-poster' />
      <h2>{props.movieDetails.genres[0].name}</h2>
    </div>
  </div>
}

I'm trying to access the nested array as seen in the image below

What I want is the genre name of the first array, I have tried {props.movieDetails.genres[0].name}

but I get 'TypeError: Cannot read property '0' of undefined'

EDIT: full Object