Разделение кода на файлы с помощью context api

Я впервые использую контекстный API. Я понимаю, как написать код на одной странице, но не могу понять, как разбить его на несколько файлов. Когда я разбиваю его, как показано ниже, появляется сообщение об ошибке. что я не экспортировал MyProvider.Но я это сделал. Я искал много видеоуроков, но не смог найти тот, который соответствует моей проблеме

App.js

import {MyProvider} from './Context';
import {myContext} from './Context';

class Name extends Component {
  render() {
    return (
      <div>
        <myContext.Consumer>
          {(context) => (
            <React.Fragment>
              <h1>Hello, {context.state.name}</h1>
              <h3>{context.state.address}</h3>
            </React.Fragment>
          )}
        </myContext.Consumer>
      </div>

    );
  }
}

class Age extends Component {
  render() {
    return (

        <div>
          <myContext.Consumer>
            {(context) => (
              <React.Fragment>
                <h1>You are {context.state.age} years old</h1>
                <h3>You were born in - {context.state.dob}</h3>
              </React.Fragment>
            )}

          </myContext.Consumer>
        </div>

    );
  }
}

class App extends Component {

  render() {
    return (
      <MyProvider>
        <div className="App">
          <Name />
          <Age />
        </div>
      </MyProvider>
    );
  }

}


export default App;

< Сильный > Context.js

export const myContext = React.createContext();

class MyProvider extends Component {
  state = {
    name: "Sam",
    address: "No.35,Main Street,Galle",
    age: 50,
    dob: "1970-10-21"
  }

  render() {
    return (
      <myContext.Provider value={{
        state: this.state
      }}>
        {this.props.children}
      </myContext.Provider>
    )
  }
} 

export default MyProvider;