React reCaptcha - ERROR for site owner: Invalid site key

Question

This message seems to continously pop-up on the reCaptcha v2 component that I'm trying to implement in my form. I have read several articles and posts about how to resolve this issue by making new v2 keys and checked the URL in the script. I followed the documentation for implementing reCaptcha v2 into React and made sure all the dependancies are present but nothing seems to work.

The <script> is within the contact.jsx instead of the index.html as it seems to disappear if not done so.

Contact.jsx

import React from 'react'
import ReCAPTCHA from "react-google-recaptcha";
import REACT_APP_SITE_KEY from '../.env'
import Navigation from '../Components/Navigation';
import Footer from '../Components/Footer';

const Contact = () => {
  
  const APP_KEY = REACT_APP_SITE_KEY
  

function onChange(value) {
  console.log("Captcha value:", value);
}

  return (
  <div className=''>  
  <Navigation/>
    <div>
      ...
        <form>
          ...
          <ReCAPTCHA 
          sitekey={APP_KEY}
          onChange={onChange}
          />
          <script src="https://www.google.com/recaptcha/api.js" async defer></script>
         ...
      </form>
    </div>
    <Footer/>
  </div>
  )}

  export default Contact

.env

REACT_APP_SECRET_KEY = "***"
REACT_APP_SITE_KEY = "***"