Reactjs React useContext 的未定义返回值

我的react 是新的，我面临着一个关于useContext的问题.

我想连接到一些API并从那里获取一些数据，并将其存储在上下文中.

因此，以下是负责此操作的MovieContextProvider.jsx文件:

import React, { useState, createContext, useEffect } from 'react';
import axios from 'axios';


const MovieContext = createContext();

const URL = "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=9813ce01a72ca1bd2ae25f091898b1c7";

function MovieContextProvider({ children }) {

    const [movieData, setMovieData] = useState();

    useEffect(() => {

        axios.get(URL)
            .then((response) => setMovieData(response.data.results))
            .catch((error) => console.log(error));

    }, []);


    return (

        <MovieContext.Provider value={movieData}>
            {children}
        </MovieContext.Provider>

    );
}

export default MovieContextProvider;

现在，我在另一个文件Movies.jsx中使用此上下文

import React from 'react';
//import MovieCard from '../Components/MovieCard';

import { useContext } from 'react';

import MovieContext from '../Contexts/MovieContextProvider';

function Movies() {

    const movieData = useContext(MovieContext);

    console.log(movieData); //Here I'm checking firstly if the data
                           //received properly from the context

    return (

        <div>

            Movies...
            
        </div>
    );
}

export default Movies;

最后，这是我的App.js%文件

import React from 'react';
import './App.css';

import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from './Components/NavBar';
import Home from './Components/Home';
import AboutUs from './Components/AboutUs';
import Movies from './Components/Movies';
import MovieContextProvider from './Contexts/MovieContextProvider';


function App() {
  return (
    <div className="App">

      <MovieContextProvider>
        <BrowserRouter>
          <NavBar></NavBar>

          <Routes>
            <Route path='/Movies' element={<Movies></Movies>}></Route>

            <Route path="/Home" element={<Home></Home>}></Route>

            <Route path="/AboutUs" element={<AboutUs></AboutUs>}></Route>

          </Routes>
        
        </BrowserRouter>
        
      </MovieContextProvider>
      


    </div>
  );
}

export default App;

现在的问题是，当我在Movies.jsx文件中记录movieData时，它的值是undefined.尽管如此，当我将它记录在MovieContextProvider.jsx内时，它看起来像预期的那样.

那么，我是不是用错了useContext(context)？我在网上做了很多研究，我在这里找到了一些关于Stack Overflow的文章，但我没有解决这个问题.

任何帮助都将不胜感激.