Значение ключа компонента отсутствует при проверке реквизита

Question

У меня есть интерфейс IMovie:

export interface IMovie {
  id: number;
  original_title: string;
  poster_path: string;
  release_date: string;
  backdrop_path: string;
}

И компонент, который отображает UL и функцию карты, которая проходит через каждый объект в массиве и для каждого объекта отображает компонент ResultListItem :

const ResultListItem = ({movie}: {movie: IMovie}) => {
  const [isHover, setHover] = useState(false);
  return (
    <li
      key={movie.id}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}>
      <p>
        <span>{movie.original_title}</span>
        <span>{movie.release_date}</span>
      </p>
      { movie.poster_path !== null ?
        <img src={imagePath + movie.poster_path} alt={movie.original_title}/>:
        <PosterNotFound src={posterNotFound} alt='No poster available' />
      }
      {isHover && <AddMovieToWatchList movie={movie}/>}
    </li>
  );
};

return (
  <ul>
    { orderedList.map((movie: IMovie) => {
      return (
        <ResultListItem key={movie.id} movie={movie} />
      );
    })}
  </ul>
);

Я получаю сообщение об ошибке:

'mov ie .id' отсутствует в проверке свойств

на этом строка:

<ResultListItem key={movie.id} movie={movie} />

Если я изменю реквизиты на ResultListItem на:

const ResultListItem = (movie) => {}

Ошибка исчезла, но я хочу / должен использовать деконструкцию опоры. Ошибка, вероятно, вызвана деконструкцией опоры ResultListItem, но я не могу понять, какой будет правильный синтаксис.