Me he enfrentado a un problema cuando creo un formulario en Reaccionar para la autenticación. Sin usar event.preventDefault() no sucedió nada cuando hago clic en el botón enviado. Pero cuando uso esto funciona bien. Cuál es la razón detrás de esto?

aquí está mi código

 const Login = () => { const signinWithGoogle=(e)=>{ e.preventDefault(); // this is my Question console.log('click me'); const provider = new GoogleAuthProvider(); signInWithPopup(auth,provider) .then((result)=>{ console.log(result); }) .then((error)=>{ console.log(error); }) } return ( <div> <Form > <Form.Group className="mb-3 w-50 m-auto " controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> <Form.Control type="email" placeholder="Enter email" /> <Form.Text className="text-muted"> We'll never share your email with anyone else. </Form.Text> </Form.Group> <Form.Group className="mb-3 w-50 m-auto " controlId="formBasicPassword"> <Form.Label>Password</Form.Label> <Form.Control type="password" placeholder="Password" /> </Form.Group> <Form.Group className="mb-3 m-auto w-50" controlId="formBasicCheckbox"> <Form.Check type="checkbox" label="Check me out" /> <Button variant="primary" type="submit" className=''> Submit </Button> </Form.Group> <div> <button className="btn btn-primary" onClick={signinWithGoogle}>Google Signin</button> </div> </Form> </div> )};