How can i clear my input fields after submiting a form? – Reactjs

I have a contact form and i want to clear the input fields and textarea after my submit function is triggered. How can i achieve this by managing the states?

This is my Form component: Where the initial state of my inputs are empty strings and the input change i set that value to the setFormValues which i set later to empty strings again after the form is submitted.

import React, { forwardRef, useState } from 'react'
import Input from '../atoms/Input'

const Form = forwardRef((props, ref) => {

  const [formValues, setFormValues] = useState({ user_name: '', user_mail: '', message: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    props.onSubmit(formValues);
    setFormValues({ user_name: '', user_mail: '', message: '' });
  };

  const handleChange = (e) => {
    setFormValues({ ...formValues, [e.target.name]: e.target.value });
  };

  return (
    <div>
        <form ref={ref} onSubmit={handleSubmit} className="contact-form reveal">
            <h3>Send Message</h3>
            <Input type="text" name="user_name" placeholder="Name" value={formValues.user_name} onChange={handleChange}/>
            <Input type="text" name="user_mail" placeholder="Email" value={formValues.user_email} onChange={handleChange}/>
            <div className="input-box">
                <textarea  id="" cols="30" rows="10"  name="message" placeholder="Message" value={formValues.message} onChange={handleChange}></textarea>
            </div>
            <div className="input-box">
                <input type="submit" className="send-btn" value="Send"/>
            </div>
        </form>
    </div>
  )
})

export default Form

This is my Contact component:

import './Contact.css'
import { FiMail, FiPhone } from 'react-icons/fi'
import { MdLocationPin } from 'react-icons/md'
import ContactCard from '../molecules/ContactCard';
import ContactTitle from '../molecules/ContactTitle';
import Form from '../organisms/Form';
import Section from './Section';
import useEmailSender from '../hooks/UseEmailSender';
function Contact() {

  const [formRef, sendEmail] = useEmailSender();

  return (
    <div className='main-container'>
        <Section className="contact reveal" id="contact">
        <ContactTitle title="Contact Me" />
        <div className="content">
            <div className="row">
              <ContactCard title="Address" content="Tigre, Buenos Aires, Argentina" icon={<MdLocationPin/>}/>
              <ContactCard title="Phone" content="+5491136176018" icon={<FiPhone/>}/>
              <ContactCard title="Email Address" content="[email protected]" icon={<FiMail/>}/>
            </div>
            <div className="row">
                <Form ref={formRef} onSubmit={sendEmail} />
            </div>
        </div>

    </Section>
    </div>
  )
}

export default Contact

This is my useEmailSender.js custom hook:

import { useRef } from 'react';
import emailjs from '@emailjs/browser';

function useEmailSender() {
  const formRef = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('####', '######', formRef.current, '#########')
      .then((result) => {
        console.log(result.text);
      }, (error) => {
        console.log(error.text);
      });
  };

  return [formRef, sendEmail];
}

export default useEmailSender;

But i get the following errors:

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
textarea