React: favorite movies not displaying

I'm building a mockup Netflix app and part of its functionality is allowing users to add a movie to their favorite movie list, however, when looking at the profile view the favorite movies don't display as expected.

After hours of looking into the problem, I came up empty.

My Question: How can I solve this issue so my user's favorite movies can display?

Any suggestion would be greatly appreciated.

Code

import React, { useEffect, useState } from 'react';
import propTypes from 'prop-types';
import axios from 'axios';
import { Link } from 'react-router-dom';

import './profile-view.scss';

import { Container, Col, Row, Button, Card, Form } from 'react-bootstrap';

export function ProfileView(props) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [favoriteMovies, setFavoriteMovies] = useState({});
  const [email, setEmail] = useState('');
  const [birthday, setBirthday] = useState('');

  const [user, setUserData] = useState('');
  const [movies, setMovies] = useState([]);
  const User = localStorage.getItem('user');
  const token = localStorage.getItem('token');
  const [favoriteMoviesList, setFavoriteMoviesList] = useState([]);

  const getUserData = () => {
    let user = localStorage.getItem('user');
    let token = localStorage.getItem('token');
    axios
      .get(`https://mymoviesapi2023.herokuapp.com/users/${user}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((response) => {
        setUsername(response.data.Username);
        setEmail(response.data.Email);
        setUserData(response.data);
        setFavoriteMoviesList(response.data.FavoriteMovies);
        console.log(response);

        response.data.FavoriteMovies.forEach((movie_id) => {
          let favMovies = props.movies.filter(
            (movie) => movie._id === movie_id
          );
          setMovies(favMovies);
        });
      })
      .catch((error) => console.error(error));
  };

  // Delete Profile
  const handleDelete = (e) => {
    const user = localStorage.getItem('user');
    const token = localStorage.getItem('token');
    axios.delete(`https://mymoviesapi2023.herokuapp.com/users/${user}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    alert(`The account ${user.Username} was successfully deleted.`);
    localStorage.clear();
    window.open('/register', '_self');
  };
  // Update Profile
  const handleUpdate = () => {
    let user = localStorage.getItem('user');
    let token = localStorage.getItem('token');

    axios
      .put(
        `https://mymoviesapi2023.herokuapp.com/users/${user}`,
        {
          Username: username,
          Password: password,
          Email: email,
          Birthday: birthday,
        },
        {
          headers: { Authorization: `Bearer ${token}` },
        }
      )

      .then((response) => {
        alert('Your profile has been updated');
        localStorage.setItem('user', response.data.Username),
          console.log(response.data);
        window.open('/', '_self');
      })
      .catch((e) => {
        console.log('Error');
      });
  };

  useEffect(() => {
    getUserData();
  }, []);

  return (
    <Container>
      <Row>
        <h3>Profile</h3>
      </Row>
      <Form>
        <Form.Group className='mb-3' controlId='username'>
          <Form.Label>Username:</Form.Label>
          <Form.Control
            onChange={(e) => setUsername(e.target.value)}
            value={username}
            type='text'
            placeholder='username'
          />
        </Form.Group>
        <Form.Group className='mb-3' controlId='password'>
          <Form.Label>Password</Form.Label>
          <Form.Control
            onChange={(e) => setPassword(e.target.value)}
            type='password'
            value={password}
            placeholder='Password'
          />
        </Form.Group>
        <Form.Group className='mb-3' controlId='email'>
          <Form.Label>Email address</Form.Label>
          <Form.Control
            onChange={(e) => setEmail(e.target.value)}
            value={email}
            type='email'
            placeholder='Enter new email'
          />
        </Form.Group>
        <Form.Group className='mb-3' controlId='birthday'>
          <Form.Label>Birthday:</Form.Label>
          <Form.Control
            onChange={(e) => setBirthday(e.target.value)}
            value={birthday}
            type='date'
            placeholder='birthday'
          />
        </Form.Group>
      </Form>
      <Row>
        <Button className='mt-2' onClick={handleUpdate}>
          Update your profile
        </Button>
        <Button className='mt-2 ml-4' onClick={handleDelete}>
          Delete your profile
        </Button>
      </Row>
      <Row className='fav-list'>
        <h4>Favorite Movies:</h4>
      </Row>

      <Row className='mb-3'>
        {favoriteMoviesList.map((movie) => (
          <Col className='mb-3' key={movie._id} xs={12} sm={6} md={4} lg={3}>
            <Card className='movie-card'>
              <Card.Img
                className='movie-card-img'
                variant='top'
                src={movie.ImageURL}
              />
              <Card.Body>
                <Card.Title className='movie-card-title'>
                  {movie.Title}
                </Card.Title>
                <Link to={`/movies/${movie._id}`}>
                  <Button className='mt-2' variant='link'>
                    Open
                  </Button>
                </Link>
              </Card.Body>
            </Card>
          </Col>
        ))}
      </Row>
    </Container>
  );
}

ProfileView.propTypes = {
  user: propTypes.shape({
    Username: propTypes.string.isRequired,
    Password: propTypes.string.isRequired,
    Email: propTypes.string.isRequired,
    Birthday: propTypes.string.isRequired,
    FavoriteMovies: propTypes.array.isRequired,
  }),
};