I’m working on a React project and I’m having trouble displaying data fetched from an API in my Movies component. The data is correctly logged in the console, but it doesn’t show up on the page. I need some help figuring out why.

Here’s the code for my API call:

import axios from 'axios';

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

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

And here’s the Movies component where I’m trying to display the data in 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.log(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;