Javascript – API is returning undefined for all of my dynamic categories

I am making a mock movie search engine where the initial search results will pull up an array on movies based on a search term, and after you click "SEE MORE" on the specific movie you want more details about all of the categories on the corresponding components page all come back undefined. I’m not sure where I went wrong.

This is the code component that is used for the initial search

import axios from "axios";
import React, { useEffect, useState } from "react";
import Nav from "../ui/Nav";
import { Navigate, useParams } from "react-router-dom";

const API_URL = "http://www.omdbapi.com/?apikey=cca6a59";

function Movies() {
  const [movies, setMovies] = useState([]);
  const params = useParams();
  const title = params.id;
  const [loading, setLoading] = useState(true);

  function onSearch() {
    setTimeout(() => {
      fetchMovies(movies);
      Navigate(`/moviecard/${movies}`)
    })
    fetchMovies(movies)
  }


  async function fetchMovies(title) {
    const { data } = await axios.get(`${API_URL}&s=${title}`);
    setMovies(data.Search);
    setLoading(false);
  }

  useEffect(() => {
    fetchMovies(title);
  }, [title]);
  return (
    <>
      <Nav />
      <div className="movie__row">
        <div className="movie__wrapper">
          {loading
            ? new Array(8).fill(0).map((_, index) => (
                <div className="movie" key={index}>
                  <div className="movie__img--skeleton">
                    <div className="movie__title--skeleton">
                      <div className="movie__year--skeleton"></div>
                    </div>
                  </div>
                </div>
              ))
            : movies.map((movie) => (
                <div className="movie" key={movie.id}>
                  <div className="movie__img">
                    <img src={`${movie.Poster}`} alt="poster" />
                    <div className="movie__content">
                      <h1>{movie.Title}</h1>
                      <h1>{movie.Year}</h1>
                      <p onClick={() => onSearch()}>SEE MORE</p>
                    </div>
                  </div>
                </div>
              ))}
        </div>
      </div>
    </>
  );
}

export default Movies;

After clicking the "SEE MORE" on the specific movie card the page navigates to my MovieCard component seen here

import React from "react";
import Nav from "../ui/Nav";
import axios from "axios";

const MovieCard = ({ movie: {Released, Actors, Genre, Director, Writer, Language, Plot } })

const API_URL = "http://www.omdbapi.com/?apikey=cca6a59";

async function moveDesc(imdbID) {
    const { movie } = await axios.get(`${API_URL}&i=${imdbID}`);
}

function Moviecard() {
  return (
    <>
      <Nav />
      <div className="movie__img--wrapper">
        <h1>${movie.Title}</h1>
        <img src={`${movie.Poster}`} alt="" />
      </div>
      <div className="movie__info--wrapper" key={imdbID}>
        <h3>
          <span className="red">Released: </span>${movie.Released}
        </h3>
        <h3>
          <span className="red">Actors: </span>${movie.Actors}
        </h3>
        <h3>
          <span className="red">Genre: </span>${movie.Genre}
        </h3>
        <h3>
          <span className="red">Director: </span>${movie.Director}
        </h3>
        <h3>
          <span className="red">Writer: </span>${movie.Writer}
        </h3>
        <h3>
          <span className="red">Language: </span>${movie.Language}
        </h3>
        <h3>
          <span className="red">Plot: </span>${movie.Plot}
        </h3>
      </div>
    </>
  );
}

export default Moviecard;

what is supposed to be shown is the movie description along with dynamic categories for each specific imdbID but i keep getting an undefined error shown here in this image error image after navigating to a specific movie

enter image description here error image after navigating to specific movie

Here is also a link to the github repository GitHub