React Context API not working Error: Element type is invalid

Question

I am new to react and just learning the Context api. I am having an issue with getting past this error page. I believe I have set up my context and provider correctly but cant seem to render the page. Below is my code. Any help would be greatly appreciated.

the Error message is: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

APP.JS

import React, { Component } from 'react';
import './App.css';
import Navbar from './Navbar';
import Home from './Home';
import Vehicles from './Vehicles'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';


export const MyContext = React.createContext();

export class MyProvider extends Component {
  state = {
    cars: [
      {
        model: "ILX",
        make: "Acura",
        info: "Compact Sport Sedan",
        bgUrl: ""
      },
      {
        model: "TLX",
        make: "Acura",
        info: "Performance Luxury Sedan",
        bgUrl: ""
      },
      {
        model: "RDX",
        make: "Acura",
        info: "Luxury Crossover SUV",
        bgUrl: ""
      },
      {
        model: "MDX",
        make: "Acura",
        info: "Three-Row Luxury SUV",
        bgUrl: ""
      },
      {
        model: "NSX",
        make: "Acura",
        info: "Next-Generation Supercar",
        bgUrl: ""
      },
      {
        model: "RLX",
        make: "Acura",
        info: "Premium Luxury Sedan",
        bgUrl: ""
      }
    ]
  }
  render() {
    return (
      <MyContext.Provider value={{state: this.state}}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

class App extends Component {
  render() {
    return (
      <MyProvider>
        <Router>
          <div className="App">
            <Navbar />
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/Vehicles" exact component={Vehicles} />
            </Switch>
          </div>
        </Router>
      </MyProvider>
    );
  }
}

export default App;


VEHICLES.JS


import React, { Component } from 'react';
import './App.css';
import MyContext from './App';
import {useContext} from 'react';
import ilx from './images/ilx.jpg'
import tlx from './images/tlx.jpg'
import nsx from './images/nsx.jpg'
import mdx from './images/mdx.jpg'
import rlx from './images/rlx.jpg'
import rdx from './images/rdx.jpg'

class Vehicles extends Component {

  render() {
    return (
      <div className="vehicles">
        <div className="showcase">
          <MyContext.Consumer>
            {(context) => (
              <React.Fragment>
                <h4>{context.state.model}</h4>
                <h6>{context.state.info}</h6>
              </React.Fragment>
            )}
          </MyContext.Consumer>
        </div>
      </div>
    )
  }
}

export default Vehicles;

Answer 1

You may have exported everything, but I think the problem is the export type

import { MyProvider, MyContext } from "./App";

https://codesandbox.io/s/winter-cache-jylqn