Не удалось прочитать данные из полученного ресурса в React. (Невозможно прочитать свойство backdrop_path из undefined)

Я получил некоторые данные из конечной точки и сохранил их в состоянии. Когда я пытаюсь просмотреть результат в консоли, он работает нормально. Но когда я пытаюсь использовать его в компоненте, он выдает ошибку, сообщающую, что ключ не определен. Вот мой код, а heroImage не определен. Помогите, пожалуйста

const Home = () => {
  const [state, setState] = useState({ movies: [] });
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const fetchMovies = async endpoint => {
    setIsError(false);
    setIsLoading(false);

    const params = new URLSearchParams(endpoint);
    if (!params.get("page")) {
      setState(prev => ({
        ...prev,
        movies: [],
        searchItem: params.get("query")
      }));
    }

    try {
      const result = await fetch(endpoint)).json();

      setState(prev => ({
        ...prev,
        movies: [...prev.movies, result.results],
        heroImage: prev.heroImage || result.results[0],
        currentPage: result.page,
        totalPage: result.total_pages
      }));
    } catch (error) {
      setIsError(true);
    }
    setIsLoading(false);
  };

  useEffect(() => {
    fetchMovies(`${API_URL}movie/popular?api_key=${API_KEY}&page=1`);
  }, []);

  return (
    <>
      <div className="rmdb-home">
        <div>
          <HeroImage
            image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${state.heroImage.backdrop_path}`}
          />
          <SearchBar />
        </div>
      </div>
    </>
  );
};