React Context API не работает Ошибка: недопустимый тип элемента

Я новичок в реакции и просто изучаю Context api. У меня проблема с прохождением этой страницы с ошибкой. Я считаю, что правильно настроил свой контекст и поставщика, но не могу отобразить страницу. Ниже мой код. Любая помощь будет принята с благодарностью.

Сообщение об ошибке: Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы могли перепутать импорт по умолчанию и именованный импорт.

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;