React, Display message after submitting form with react-hook-form

I use react-hook-form and would like to display message to the user after submitting form. I know how to do that with alert, but would like to have that message as a paragraph. After submitting fields should be again empty.

Here is my Form component:

import React from "react";
import { useForm } from "react-hook-form";

const Form = ({ title }) => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data, e) => {
    e.preventDefault();
    console.log(data);
    alert(`thank you ${data.name} for your message`);
  };

  return (
    <div className="formContainer">
      <Title title="Lets stay in touch" />
      <div className="form">
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form__row">
              <input
                className={`inputForm ${errors.name ? "inputFormError" : ""}`}
                name="name"
                type="text"
                placeholder="name"
                ref={register({ required: true })}
              />

              <input
                className={`inputForm ${
                  errors.surname ? "inputFormError" : ""
                }`}
                name="surname"
                type="text"
                placeholder="surname"
                ref={register({ required: true })}
              />
            </div>
            <div>
              <textarea
                className={`inputForm areaForm ${
                  errors.message ? "inputFormError" : ""
                }`}
                name="message"
                placeholder="Your message"
                ref={register({ required: true })}
              ></textarea>
            </div>
            <div>
              <button className="form__formButton" type="submit">
                Send
              </button>
            </div>
          </form>
      </div>
    </div>
  );
};

export default Form;