Can't seem to get forms to work in React

I created a Netlify form in React following the guide here. On a form submit the page refreshes but no submission is logged in the Netlify backend.

If the form is submitted and then a hard cache refresh the form will show the Netlify success page and the submission will be logged correctly. Not sure why it’s doing this but obviously would like it to submit on button click.

Code below, using react-bootstrap components:

index.html

<form name="contact" netlify netlify-honeypot="bot-field" hidden>
  <input type="email" name="email" />
</form>

App.js

<Form className="form-signin text-center" name="contact" method="post">
  <Form.Control name="form-name" type="hidden" value="contact" />
  <h1 className="mb-3">Title</h1>
  <h2 className="h3 mb-3 font-weight-normal">Sign up for updates!</h2>
  <Form.Group>
    <Form.Label className="sr-only">Email address</Form.Label>
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
    <Form.Control name="email" type="email" placeholder="Enter email" required="required" />
  </Form.Group>
  <Button variant="dark" type="submit" className="btn-block">
    Submit
  </Button>
</Form>

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues.

you might also find this useful:

I am wondering whether your html form also needs to contain the button that is present in your App.js.