The 3rd parameter is expected to be the HTML form element or the style selector of form

Question

I'm building a restaurant website and am doing the reservations page. I'm using my own custom form and using EmailJs to send the data from the reservations inputs to my email. When I fill out the form it gives me an error the 3rd parameter of the sendform function from emailjs is expected to be the html form element or the style selector of a form. My code below.

import diningroom from "../images/diningroom.jpg";
import { init, sendForm } from 'emailjs-com';
init('DlhTOjdE7Pqq5UJHA');

function Reservations() {
  const initialState = {
    lastname: "",
    guests: "",
    phone: "",
    date: "",
    time: "",
  };

  const [reservation, setReservation] = useState(initialState);

  const onSubmit = (e) => {
 
    e.preventDefault();
  sendForm('Carmellos_Reservation','template_9oxce3q','#lastname','#amount','#guests','#phone','#day','#time')
    .then(function(response) {
      console.log('SUCCESS!', response.status, response.text);
      setReservation(...reservation,initialState)
    }, function(error) {
      console.log('FAILED...', error);
    });
}
  

  const onChange = (e) => {
    setReservation({
      ...reservation,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      <div className="reservation-container">
        <h2 className="reservations">Reservations</h2>
        <p className="parag">
          
          For Reservations Please call 434 977 5200 or Please fill out the form
          Below.
        </p>

        <div
          className="container"
          style={{ backgroundImage: `url(${diningroom})` }}
          c
        >
          <p className="paragraph">
            Carmello's is open for dinner only. Our hours are Tuesday-Saturday
            from 5pm to 9:30pm and on Sundays 5 til 9pm
          </p>
          <p className="paragraph">
            We can accomadate a reservation of 2 persons to large parties. The
            restaurant is available for wedding rehearsals and private parties.
            Please contact Stella Hedges regarding large parties. Reservations
            are strongly urged on the Weekends and we do accept customers as
            walkins. For any reservation greater than 10 please call the
            restuarant directly.
          </p>
          <div className="form-div">
            <form className="reservation-form" onSubmit={onSubmit}>
              <label htmlFor="lastname">LastName</label>  
              <input
                type="text"
                name="lastname"
                value={reservation.lastname}
                id="lastname"
                onChange={onChange}
                placeholder="Last Name"
                required
              />
              <label htmlFor="amount"> Amount of Guests</label>
              <input
                type="number"
                name="amount"
                value={reservation.amount}
                id="amount"
                onChange={onChange}
                placeholder="Amount of Guests"
                required
              />
              <label htmlFor="phone">Phone Number</label>
              <input
                type="text"
                name="phone"
                value={reservation.phone}
                id="phone"
                onChange={onChange}
                placeholder="Phone Number"
                required
              />
              <label htmlFor="date" > Day</label>
              <input
                type="date"
                name="date"
                value={reservation.day}
                id="date"
                onChange={onChange}
                placeholder="Date"
                required
              />
              <label htmlFor="time" >Time</label> 
              <input
                type="time"
                name="time"
                value={reservation.time}
                id="time"
                onChange={onChange}
                min="17:00"
                max="21:00"
                placeholder="time"
                required
              />
              <div className="div-button">
                <button type="submit" name="submit">
                  Make Reservation
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

export default Reservations;

Answer 1

 SendForm=()=> {
    
            3th- form.current
        }

      return(
        <form onSubmit={sendForm} ref={form} 

form.current get info from "form" and put in template params

of corse that we need create a ref to pass the function argument