Компонент React не отображает данные из вызова API

Я работаю над проектом React, и у меня возникли проблемы с отображением данных, полученных из API, в моем компоненте «Фильмы». Данные правильно регистрируются в консоли, но не отображаются на странице. Мне нужна помощь, чтобы выяснить, почему.

Вот код моего вызова API:

import axios from 'axios';

const BASE_URL = 'http://127.0.0.1:5000';

export const getMovie = async (mood) => {
    try {
        console.info('Fetching movies for mood:', mood);
        const response = await axios.get(`${BASE_URL}/recomendar`, {
            params: { mood },
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`
            }
        });
        console.info(response.data);
        return response.data;
    } catch (error) {
        console.error('Error fetching movies:', error);
        throw error;
    }
};

А вот компонент Movies, где я пытаюсь отобразить данные в HTML:

import React, { useEffect, useState } from "react";
import { getMovie } from "../services/api";

const Movies = ({ mood }) => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      if (mood) {
        try {
          const moviesData = await getMovie(mood);
          console.info(moviesData);  // This logs the data correctly
          setMovies(moviesData);
        } catch (error) {
          console.error("Error fetching movies:", error);
        }
      }
    };

    fetchMovies();
  }, [mood]);

  return (
    <div style = {{ padding: "128px" }}>
      <h3>Movies</h3>
      <ul>
        {movies.map((movie) => (
          <li key = {movie.id}>
            <div>{movie.title}</div>
            <div>{movie.genre}</div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Movies;

Как поступают данные:

В HTML тег ul пуст.

Я получаю mood при выборе пользователя через Onclick в главном компоненте.

import { Link } from "react-router-dom";

import Section from "./Section";
import Button from "./Button";
import curve from "../assets/curve.png";
import { moods } from "../constants/mood";
import { getMovie } from "../services/api";
import { useState } from "react";

export const Main = () => {


  const [movies, setMovies] = useState([]);

  const handleMoodSelect = async (mood) => {
    try {
      const moviesData = await getMovie(mood);
      setMovies(moviesData);
    } catch (error) {
      console.error('Error fetching movies:', error);
    }
  };

  return (
    <Section className = "pt-[12rem] -mt-[5.25rem] mb-8" customPaddings id = "main">
      <div className = "container relative">
        <div className = "relative z-1 max-w-[62rem] mx-auto text-center mb-[3.875rem] md:mb-20 lg:mb-[6.25rem]">
          <h1 className = "h1 mb-6">
            Descubra filmes incríveis com base no seu{" "}
            <span className = "inline-block relative h1">
              humor
              <img
                src = {curve}
                className = "absolute top-full left-0 w-full xl:-mt-2"
                width = {624}
                height = {28}
                alt = "Curva"
              />
            </span>
          </h1>
          <span className = "inline-block relative h1">
            <img
              src = {curve}
              className = "absolute top-full left-0 w-full xl:-mt-2"
              width = {624}
              height = {28}
              alt = "Curva"
            />
          </span>
          <p className = "body-1 max-w-3xl mx-auto mb-6 text-n-2 lg:mb-8">
            A pergunta é: Como você está se sentindo hoje?
          </p>
          <Button white>Começar agora</Button>
        </div>

        <div className = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4">
          {moods.map((mood) => (
            <button onClick = {() => handleMoodSelect(mood.title)}>
            <Link to = {`/movies/${mood.title}`}>
              <div className = "mb-2 p-4 rounded-lg relative">
                <div
                  className = "absolute inset-0 cursor-pointer"
                  style = {{
                    borderRadius: "5px",
                    padding: "2px",
                    background:
                      "linear-gradient(225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)",
                    WebkitMask:
                      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
                    WebkitMaskComposite: "xor",
                    maskComposite: "exclude",
                    position: "absolute",
                    content: '""',
                    inset: 0,
                  }}
                />
                {mood.title} {mood.emoji}
              </div>
            </Link>
          </button>
          ))}
        </div>
      </div>
    </Section>
  );
};