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

@@ -10,15 +10,16 @@ export function Signup ( props ) {
     const[validusername,setValidusername] = useState(false)
     const[useremail,setUseremail] = useState('')
     const[validemail,setValidemail] = useState(false)
-    const[password,setUserpassword] = useState('')
+    const[userpassword,setUserpassword] = useState('')
     const[validpassword,setValidpassword] = useState(false)
+  
     const submitHandler = (evt) => {
       evt.preventDefault()
-        props.handler(useremail, password)
+      props.handler( useremail, userpassword )
     }
   
     useEffect( () => {
-        if(username.length >= 4) {
+      if( username.length >= 4 ) {
         setValidusername(true)
       }
       else {
@@ -27,29 +28,29 @@ export function Signup ( props ) {
     }, [username] )
   
     useEffect( () => {
-        if(useremail.indexOf('@') > 0 ) {
+      if( useremail.indexOf('@') > 0 ) {
         setValidemail(true)
       }
       else {
         setValidemail(false)
       }
-     }, [useremail] )
+    }, [useremail])
   
     useEffect( () => {
-        if( password.length >= 8 ) {
+      if( userpassword.length >= 8 ) {
         setValidpassword(true)
       }
       else{
         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