I am pretty sure my Public key is correct, yet I get invalid Public key error when I try to submit the form. What is going on? My code is as follows:

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

const SERVICE_ID = process.env.REACT_APP_SERVICE_ID;
const TEMPLATE_ID = process.env.REACT_APP_TEMPLATE_ID;
const PUBLIC_KEY = process.env.REACT_APP_PUBLIC_KEY;

interface FormState {
name: string;
email: string;
subject:string;
message: string;
}

const ContactUs: React.FC = () => {
const form: any = useRef();

    const sendEmail = (e:any) => {
        e.preventDefault();
        
        if(!(SERVICE_ID == undefined) && !(TEMPLATE_ID == undefined) && !(PUBLIC_KEY == undefined)){
        
        emailjs
            .sendForm(SERVICE_ID, TEMPLATE_ID, form.current, PUBLIC_KEY)
            .then(
            () => {
                console.log('SUCCESS!');
            },
            (error) => {
                console.log('FAILED Again', error);
            },
          );
        }
        else{
               console.log("somethis is undefined")
        }
      };

return (
<form ref={form} onSubmit={sendEmail} className='text-hero'>
<label>Name</label>
<input type="text" name="user_name" />
<label>Email</label>
<input type="email" name="user_email" />
<label>Message</label>
<textarea name="message" />
<input type="submit" value="Send" />
</form>
);
};

export default ContactUs;

This is essentially the same as the example in the documentation. This is essentially the same as the example in the documentation. This is essentially the same as the example in the documentation.
This is essentially the same as the example in the documentation. This is essentially the same as the example in the documentation.