получение ошибки: проверьте метод рендеринга ʻAuthProvider`

Question

Привет, я все еще новичок в реакции, у меня проблема и ошибка:

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

.

Я создал компонент аутентификации, и в сообщении об ошибке упоминается, что "Проверить метод рендеринга AuthProvider"Я подозревал, что ошибка возникает из-за функции AuthProvider в компоненте аутентификации, и я не знаю, как ее решить.

снимок экрана:https://imgur.com/CC7uO6A

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;