Error: Uncaught Expected the HTML form element or the style selector of form

I've set up my contact page (with React) to work with Netlify's form submission API, however I'm receiving the following error:

I figure it's either something wrong with my html or the way I've sent the data. However I've done this in line with the documentation as best I can - albeit it's difficult to find working examples.

react-dom.production.min.js:52 Uncaught Expected the HTML form element or the style selector of form

Would really appreciate any guidance on this, thanks.

Here's my Contact function -

const encode = (data) => {
  return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&");
}

function Contact() {

    const [name, setName] = useState('');
    const handleName = e => {
      setName(e.currentTarget.value);
      };

    const [subject, setSubject] = useState('');
    const handleSubject = e => {
        setSubject(e.currentTarget.value); 
    }

    const [email, setEmail] = useState('');
    const handleEmail = e => {
        setEmail(e.currentTarget.value);
    };

    const [message, setMessage] = useState('');
    const handleMessage = e => {
        setMessage(e.currentTarget.value);
  };

  const sendEmail = e => {

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", ...useState })
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error));

    e.preventDefault();
    console.log((name), (email), (message)); 
  };


  return (

    <>

    <div className="sub-wrap">

    <h3 className="small-text">Call me on the telephone</h3>

    <h3 className="numb">07879 *** ***</h3>

    <h3 className="small-text">Or punch your deets into the form below</h3>

    </div>

    <div className="form-wrap">

    <form onSubmit={ sendEmail } >

        <div className="input-wrap">

            <legend>Name</legend>
          <input
            value={ name }
            type='text'
            name='name'
            onChange={ handleName }
          />
        </div>

        <div className="input-wrap">   
          <legend>Email</legend>
            <input
              value={ email }
              type='email'
              name='email'
              onChange={ handleEmail }
            />
        </div>

        <div className="input-wrap">  
          <legend>Subject</legend>
            <input
              value={ subject }
              type='subject'
              name='subject'
              onChange={ handleSubject }
            />
        </div>

        <div className="input-wrap">  
          <legend>Message</legend>
            <textarea
                        className="msg-box"
              value={ message }
              name='message'
              onChange={ handleMessage }
                />
        </div>

            <button className='input-button' type='submit'>Send</button>

          </form>

        </div>

        </>

    );
  }

export default Contact;