Various repairs to broken signup button not submitting data

src/App.js

@@ -14,7 +14,7 @@ import { Signup } from "./pages/Signup"
 
 function App() {
   const FBapp = initializeApp(FirebaseConfig)
-  const FBauth = getAuth(FBapp)
+  const FBauth = getAuth()
   // navigation array
   const navItems = [
     { label: "Home", link: "/" },
@@ -42,11 +42,13 @@ function App() {
   // signing up a user
   const signUp = (email, password) => {
     createUserWithEmailAndPassword(FBauth, email, password)
-      .then((userCredential) => {
+      .then( (userCredential) => {
         // do something
       })
       .catch((error) => console.log(error.message))
     }
+
+
     return (
       <div className="App">
         <Header items={nav} />
@@ -54,7 +56,7 @@ function App() {
           <Route path="/" element={<Home greeting="Hey you're at home!" />} />
           <Route path="/about" element={<About greeting="Hey you, this is about page!" handler={saySomething} />} />
           <Route path="/contact" element={<Contact greeting="Hey you, this is contact page!" />} />
-          <Route path="/signup" element={<Signup handler={signUp}/>} />
+          <Route path="/signup" element={ <Signup handler={signUp}/> } />
         </Routes>
       </div>
     );

src/pages/Signup.js

@@ -6,50 +6,51 @@ import Button from "react-bootstrap/Button"
 import {useState, useEffect} from 'react';
 
 export function Signup ( props ) {
-   const[username,setUsername] = useState('')
+    const[username,setUsername] = useState('')
     const[validusername,setValidusername] = useState(false)
-   const[useremail,setUseremail] = useState('')
+    const[useremail,setUseremail] = useState('')
-   const[validemail,setValidemail] = useState(false)
+    const[validemail,setValidemail] = useState(false)
-    const[password,setUserpassword] = useState('')
+    const[userpassword,setUserpassword] = useState('')
     const[validpassword,setValidpassword] = useState(false)
+  
     const submitHandler = (evt) => {
-        evt.preventDefault()
+      evt.preventDefault()
-        props.handler(useremail, password)
+      props.handler( useremail, userpassword )
     }
-
+  
     useEffect( () => {
-        if(username.length >= 4) {
+      if( username.length >= 4 ) {
-            setValidusername(true)
+        setValidusername(true)
-        }
+      }
-        else {
+      else {
-            setValidusername(false)
+        setValidusername(false)
-        }
+      }
-     }, [username] )
+    }, [username] )
-
+  
-     useEffect( () => {
+    useEffect( () => {
-        if(useremail.indexOf('@') > 0 ) {
+      if( useremail.indexOf('@') > 0 ) {
-            setValidemail(true)
+        setValidemail(true)
-        }
+      }
-        else {
+      else {
-            setValidemail(false)
+        setValidemail(false)
-        }
+      }
-     }, [useremail] )
+    }, [useremail])
-
+  
-     useEffect( () => {
+    useEffect( () => {
-        if( password.length >= 8 ) {
+      if( userpassword.length >= 8 ) {
-            setValidpassword(true)
+        setValidpassword(true)
-        }
+      }
-        else{
+      else{
-            setValidpassword(false)
+        setValidpassword(false)
-        }
+      }
-    }, [password] )
+    }, [userpassword])
 
     return (
        
        <Container>
         <Row>
             <Col md={{span: 4, offset:4}}>
-           <Form>
+           <Form onSubmit={submitHandler}>
                 <Form.Group>
                     <Form.Label>Username</Form.Label>
                     <Form.Control