React Frontend

const InputsSignUp = () => {
  const email = "";
  const password= ""

  const [state, setState] = React.useState({
    email: ""
  })

  function handleChange(evt) {
    evt.preventDefault();

      setState({ firstName: evt.target.value });
    }
    
    return (
        <>
              <Container fluid="sm" style={{backgroundColor: 'white'}}>
      <h1>{email}</h1>
      <h1>{password}</h1>
    <Form>
      <Form.Group className="mb-3" controlId="formBasicUsername">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="text" placeholder="Enter email" value={state.email} onChange={handleChange} />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

        <Button variant="primary" type="submit" onSubmit={console.log(state.email)}>
        Submit
      </Button>
      </Form>
      </Container>
        </>
    )
}

export default InputsSignUp;

下面是我的表单的代码
每次我在字段中输入文本时，它都会继续提交请求，在本例中是记录输入的数据
如何更改代码，使其仅在我按下“提交”按钮时提交请求