How to create contact seller component in React?

// pages/AdView
<div className="col-md-5">
  <ContactSeller ad={ad} />
</div>

// components/forms/ContactSeller.js
import { useState, useEffect } from "react";
import { Avatar } from "antd";
import toast from "react-hot-toast";
import axios from "axios";
import { useAuth } from "../../context/auth";
import { Link, useNavigate } from "react-router-dom";

export default function ContactSeller({ ad }) {
  // context
  const [auth, setAuth] = useAuth();
  // state

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [phone, setPhone] = useState("");
  const [loading, setLoading] = useState(false);

  // hooks
  const navigate = useNavigate();

  useEffect(() => {
    if (auth?.user) {
      setName(auth.user?.name);
      setEmail(auth.user?.email);
      setPhone(auth.user?.phone);
    }
  }, [auth?.user]);

  const handleSubmit = async () => {
    setLoading(true);
    try {
      console.log(name, email, message, phone);
    } catch (err) {
      console.log(err);
      setLoading(false);
      toast.error("Something went wrong. Try again.");
    }
  };

  return (
    <div className="card shadow px-3 py-3">
      <div className="row">
        <div className="col">
          <div className="row mx-2 mb-3 mt-3">
            <div>
              <h4>Contact {ad.postedBy?.name ?? ad.postedBy?.username}</h4>
              <p>
                About {ad?.type} in {ad?.address} for {ad?.action} ${ad?.price}
              </p>
            </div>

            <textarea
              className="form-control mb-3"
              name="message"
              value={message}
              placeholder="✍️ Write description"
              onChange={(e) => setMessage(e.target.value)}
            />

            <input
              name="name"
              type="text"
              className="form-control mb-3 text-danger"
              placeholder="Enter your name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              disabled={auth?.user?.name}
              required
            />

            <input
              type="email"
              placeholder="Enter your email"
              className="form-control mb-3 text-danger"
              value={email}
              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
              disabled={auth?.user?.email}
              required
            />

            <input
              name="phone"
              type="text"
              className="form-control mb-3 text-danger"
              placeholder="Enter your phone"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              disabled={auth?.user?.phone}
            />

            <button
              className="btn btn-primary"
              disabled={!name || !email || loading}
              onClick={handleSubmit}
            >
              {loading ? "Please wait.." : "Send enquiry"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}