Не удалось добавить моего провайдера в файл index.js в reactjs

Question

У меня есть компонент MovieDetails.js и контекст (имя MyContext) и поставщик (имя MyProvider). Компонент MyProvider имеет список фильмов. Я хотел бы отобразить этот список в MovieDetails component.so, в файле index.js импортировал компоненты MovieDetails и MyContext, как показано ниже.

import {MovieDetails} from './Assignment/Topic12Assignment1/MovieDetails'  
import { MyProvider } from './Assignment/Topic12Assignment1/MyContext';

попробуйте визуализировать компонент MovieDetails, как показано ниже.

<MyProvider>
ReactDOM.render(<MovieDetails />,document.getElementById('root'));
</MyProvider>

возврат ошибки, как показано ниже

https://stackru.com/imag es/5f6141a9e5d3f583271bc6b21756650fcc431bc1.png

не понимаю, где я что-то пропустил?

ниже код - компонент MovieDetails

import React, { useState, useContext }  from 'react'
import {MyContext} from './MyContext'

export const MovieDetails = () => {
  const [movies,setMovies] = useContext(MyContext);
  debugger
    return(
        <React.Fragment>
      {
              <li>{movies.length}</li>
      }
        </React.Fragment>
    )
}

Ниже код для файла MyContext

import React, {useState,createContext} from 'react'
//import AppReducer from './AppReducer'

export const MyContext = createContext();
export const MyProvider = (props) => {
    const [movies,setMovies] = useState([ {MovieID:1,MovieName:'Rangastalam',LeadActor:'RamCharan',LeadActree:'Samantha'
    ,YearOfRelease:2019,Language:'Telugu',Collections:'200Crores'},
   {MovieID:2,MovieName:'AVP',LeadActor:'AlluArun',LeadActree:'Puja'
    ,YearOfRelease:2020,Language:'Telugu',Collections:'400Crores'},
   {MovieID:3,MovieName:'Saaho',LeadActor:'Prabhas',LeadActree:'Shraddha'
    ,YearOfRelease:2020,Language:'Telugu',Collections:'300Crores'}]);

    return(
<MyContext.MyProvider value = {'testomg'}>{props.children}</MyContext.MyProvider>
    );
};

код индексного файла

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import {MovieDetails} from './Assignment/Topic12Assignment1/MovieDetails'
import { MyProvider } from './Assignment/Topic12Assignment1/MyContext';

<MyProvider>
ReactDOM.render(<MovieDetails />,document.getElementById('root'));
</MyProvider>
serviceWorker.unregister();

код файла приложения

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Answer 1

Ошибка в MyProvider файл

return (
  <MyContext.MyProvider value={"testomg"}>{props.children}</MyContext.MyProvider>
);

должно быть

return (
  <MyContext.Provider value={"testomg"}>{props.children}</MyContext.Provider>
);

Также в index.js файл это должно быть исправлено

<MyProvider>
ReactDOM.render(<MovieDetails />,document.getElementById('root'));
</MyProvider>

должно быть

ReactDOM.render(
<MyProvider>
  <MovieDetails />
</MyProvider>
,document.getElementById('root'));