Remove text from form input after user clicks/submits

I’m wanting to remove texts from the input fields of a form once user has clicked submit. I was able to use basic DOM manipulation to clear the textarea which surprised me in React but then was unable to do DOM manipulation for the input text areas. Is this possible with DOM manipulation I’d love it if it were that easy. Or should I be going down a different path?

import "./contact.css";
import phone from "../../img/phone.png";
import email from "../../img/email.png";
import github from "../../img/github.png";
import link from "../../img/link.png";
import resume from "../../img/resume.png";
import { useRef, useState } from "react";
import emailjs from "@emailjs/browser";
import PDF from "../../img/PDF.pdf";

const Contact = () => {
  const formRef = useRef();
  const [done, setDone] = useState(false);

  const handleSubmit = (event) => {
    event.preventDefault();
    document.querySelector(".textarea").value = "";
    document.querySelector("usersinput").value = "";
    emailjs
      .sendForm(
        "0000",
        "0000",
        formRef.current,
        "0000"
      )
      .then(
        (result) => {
          console.log(result.text);
          setDone(true);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <div className="c">
      <div className="c-bg"></div>
      <div className="c-wrapper">
        <div className="c-left">
          <h1 className="c-title">Let's talk</h1>
          <div className="c-info">
            <div className="c-info-item">
              <img src={phone} alt="" className="c-icon" />
              +61 0000
            </div>
            <div className="c-info-item">
              <img src={email} alt="" className="c-icon" />
              0000
            </div>
            <div className="c-info-item">
              <img src={resume} alt="" className="c-icon" />
              <a href={PDF} target="_blank">
                CV
              </a>
            </div>
            <div className="c-info-item">
              <img src={github} alt="" className="c-icon" />
              
            </div>
            <div className="c-info-item">
              <img src={link} alt="" className="c-icon" />
              
            </div>
          </div>
        </div>
        <div className="c-right">
          <p className="c-description">
            <b>Who are you?</b> lorem
          </p>
          <form ref={formRef} onSubmit={handleSubmit}>
            <input
              type="text"
              placeholder="name"
              name="user_name"
              className="userinputs"
            />
            <input
              type="text"
              placeholder="subject"
              name="user_subject"
              className="userinputs"
            />
            <input
              type="text"
              placeholder="email"
              name="user_email"
              className="userinputs"
            />
            <textarea
              rows="5"
              placeholder="please enter your message..."
              name="message"
              className="textarea"
            ></textarea>
            <button>Submit</button>
            {done && "      Thank you..."}
          </form>
        </div>
      </div>
    </div>
  );
};

export default Contact;

>Solution :

You are trying to address a single element by class name, that’s shared among several items. You need to use querySelectorAll() for that case and iterate over the result (need to assign to a variable) resetting their values to an empty string. An example would look like this:

let itms = document.querySelectorAll(".userinputs");
for (let itm of itms) {
    itm.value = "";
}