emailjs error

error text
The service ID is invalid. To find this ID, visit https://dashboard.emailjs.com/admin

//.env
NEXT_PUBLIC_YOUR_SERVICE_ID = "...",
NEXT_PUBLIC_YOUR_TEMPLATE_ID = "...",
NEXT_PUBLIC_YOUR_PUBLIC_KEY = "..."

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

const Contact = () => {
  const form = useRef(null);

  const sendEmail = (e: React.MouseEvent<HTMLFormElement>) => {
    e.preventDefault();

    const serviceID = process.env.NEXT_PUBLIC_YOUR_SERVICE_ID;
    const templateID = process.env.NEXT_PUBLIC_YOUR_TEMPLATE_ID;
    const publicKEY = process.env.NEXT_PUBLIC_YOUR_PUBLIC_KEY;
    
    if (
      form.current !== null &&
      serviceID !== undefined &&
      templateID !== undefined &&
      publicKEY !== undefined
    ) {
      emailjs
        .sendForm(
          serviceID,
          templateID,
          form.current,
          publicKEY
        )
        .then(
          (result) => {
            alert(result.text)
          },
          (error) => {
            alert(error.text)
          }
        );
    }
  };

  return (
    <>
      <div className="page-layout">
        <h1 className="page-title">Contact</h1>
        <form ref={form} onSubmit={sendEmail}>
          <div className="form-container">
            <label className="form-label">&#42; Name</label>
            <input
              type="text"
              name="user_name"
              className="form-input"
            />
          </div>
          <div className="form-container">
            <label className="form-label">&#42; Email</label>
            <input
              type="email"
              name="email"
              className="form-input"
            />
          </div>
          <div className="form-container w-[40rem] block">
            <label className="mb-2 form-label">&#42; Message</label>
            <textarea
              name="message"
              cols={3000}
              className="w-[40rem] border-2 rounded-lg h-[28rem] p-2"
            />
          </div>
          <button
            type="submit"
            className="px-4 py-2 text-white bg-gray-500 rounded-lg"
          >
            Send
          </button>
        </form>
      </div>
    </>
  );
};

export default Contact;