TypeError: SignUp is not a functionエラーにより、ログイン機能が実装できない

TypeError: SignUp is not a functionエラーが消えません

プログラミング初心者です
Next.jsを用いたログイン機能のを実装していまして、
SignIn画面には問題なく移行できるのですが、

サインインボタンを押すとエラーが起きます

.envやnext.config.jsも作ったのですがもしかして余計ですか？

-example でwith firebaseを使っています

ターミナルでのエラー

react-dom.development.js?61bb:475 Uncaught TypeError: SignUp is not a function

 at handleSubmit (SignUp.js?b395:11)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:385)
    at invokeGuardedCallback (react-dom.development.js?61bb:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:454)
    at executeDispatch (react-dom.development.js?61bb:584)
    at executeDispatchesInOrder (react-dom.development.js?61bb:609)
    at executeDispatchesAndRelease (react-dom.development.js?61bb:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:722)
    at forEachAccumulated (react-dom.development.js?61bb:694)
    at runEventsInBatch (react-dom.development.js?61bb:739)
    at runExtractedPluginEventsInBatch (react-dom.development.js?61bb:880)
    at handleTopLevel (react-dom.development.js?61bb:5803)
    at batchedEventUpdates$1 (react-dom.development.js?61bb:24401)
    at batchedEventUpdates (react-dom.development.js?61bb:1415)
    at dispatchEventForPluginEventSystem (react-dom.development.js?61bb:5894)
    at attemptToDispatchEvent (react-dom.development.js?61bb:6010)
    at dispatchEvent (react-dom.development.js?61bb:5914)
    at unstable_runWithPriority (scheduler.development.js?3069:697)
    at runWithPriority$2 (react-dom.development.js?61bb:12149)
    at discreteUpdates$1 (react-dom.development.js?61bb:24417)
    at discreteUpdates (react-dom.development.js?61bb:1438)
    at dispatchDiscreteEvent (react-dom.development.js?61bb:5881)



Failed to launch editor: TypeError: editor.toLowerCase is not a function

SignUp.js

import React, { useContext } from "react";
import { AuthContext } from "./AuthProvider";
import { withRouter } from 'next/router'

const SignUp = ( ) => {
  const SignUp  = useContext(AuthContext);
  
  const handleSubmit = event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    SignUp(email.value, password.value);
    console.log(SignUp)
  };

  return (
    <div>
      <h1>Sign up</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email
          <input name="email" type="email" placeholder="Email" />
        </label>
        <label>
          Password
          <input name="password" type="password" placeholder="Password" />
        </label>
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
};

export default withRouter(SignUp);

AuthProvider.jsx

import React, { useEffect, useState } from "react";

// contextの作成
export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  // ユーザーをログインさせる関数
  const Login = async (email, password) => {
    try {
      await app.auth().signInWithEmailAndPassword(email, password);
      router.push("/");
    } catch (error) {
      alert(error);
    }
  };

  // 新しいユーザーを作成しログインさせる関数
  const SignUp = async (email, password, history) => {
    try {
      await app.auth().createUserWithEmailAndPassword(email, password);
      router.push("/");
    } catch (error) {
      alert(error);
    }
  };

  useEffect(() => {
    app.auth().onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    // Contextを使用して認証に必要な情報をコンポーネントツリーに流し込む。
    <AuthContext.Provider
      value={{
        Login: Login,
        SignUp: SignUp,
        currentUser
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

userContext.js



import { useState, useEffect, createContext, useContext } from 'react'
import  firebase from '../firebase/clientApp'

export const UserContext = createContext()

export default function UserContextComp({ children }) {
  const [user, setUser] = useState(null)
  const [loadingUser, setLoadingUser] = useState(true) // Helpful, to update the UI accordingly.

  useEffect(() => {
    // Listen authenticated user
    const unsubscriber = firebase.auth().onAuthStateChanged(async (user) => {
      try {
        if (user) {
          // User is signed in.
          const { uid, displayName, email } = user
          // You could also look for the user doc in your Firestore (if you have one):
          // const userDoc = await firebase.firestore().doc(`users/${uid}`).get()
          setUser({ uid, displayName, email })
        } else setUser(null)
      } catch (error) {
        // Most probably a connection error. Handle appropriately.
      } finally {
        setLoadingUser(false)
      }
    })

    // Unsubscribe auth listener on unmount
    return () => unsubscriber()
  }, [])

  return (
    <UserContext.Provider value={{ user, setUser, loadingUser ,setLoadingUser}}>
      {children}
    </UserContext.Provider>
  )
}

// Custom hook that shorhands the context!
export const useUser = () => useContext(UserContext)

また、next.config.jsこの記事を読んでconfigにも自身がなくなりました、


require("dotenv").config();
const path = require("path");
const Dotenv = require("dotenv-webpack");
module.exports = {
  webpack: config => {
    config.plugins = config.plugins || [];
    config.plugins = [
      ...config.plugins,
      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, ".env"),
        systemvars: true
      })
    ];
    return config;
  }
};

検証ツールにて
index.esm.js?abfd:106 [2020-09-01T01:16:47.798Z]  @firebase/app: 
    Warning: Firebase is already defined in the global scope. Please make sure
    Firebase library is only loaded once.