receiving an error : Check the render method of `AuthProvider`

Question

Hi there im still new in react, I am having an issue and the error:

Error: 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

.

I created the auth component and the error mention that to "Check the render method of AuthProvider" I suspected that the error comes from the "AuthProvider"function in the auth component and Im not sure how to solved it.

screen shot: https://i.stack.imgur.com/A1veZ.jpg

auth.js

import React, { useReducer, createContext } from "react";


const AuthContext = createContext({
  user: null,
  login: (userData) => {},
  logout: () => {},
});

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        user: action.payload,
      };
    case "LOGOUT":
      return {
        ...state,
        user: null,
      };
    default:
      return state;
  }
}

function AuthProvider(props) {
  const [state, dispatch] = useReducer(authReducer, { user: null });

  function login(userData) {
    dispatch({
      type: "LOGIN",
      payload: userData,
    });
  }

  function logout() {
    dispatch({ type: "LOGOUT" });
  }

  return (
    <AuthContext.provider
      value={{ user: state.user, login, logout }}
      {...props}
    />
  );
}

export { AuthContext, AuthProvider };

app.js

//import from react library
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

//import from component folder
import { AuthProvider } from "./config/auth";
import Dashboard from "./dashboard/pages/Dashboard";
import Signin from "./login/pages/Signin";
import AdminPage from "./admin/pages/AdminPage";
import Login from "./login/pages/Login";

// import AssetPage from './asset/pages/AssetPage'
// import MaterialTables from './component/MaterialTable'

function App() {
  return (
    <>
      <AuthProvider>
        <Router>
          <Route exact path="/" component={Login} />
          <Route path="/dashboard" component={Dashboard} />
          <Route path="/admin" component={AdminPage} />
          {/* <Route path="/login" component={Login} /> */}

          {/* <Route path="/asset" component={AssetPage}/> */}
        </Router>
      </AuthProvider>
    </>
  );
}

export default App;