InvalidKeyMapError in Google Javascript API – Blancer.com Tutorials and projects

I have been facing this error in my React project whenever I use Maps JavaScript API along with Google places API.
Maps JavaScript API error: InvalidKeyMapError

Here’s the code:

return (
    <SectionWrapper id={'generate'} header={"Generate your Dream Trip"} title={["Tell us your", "Travel","Preferences"]}>
      <Header index={'01'} title={'Pick a destination'} />
      <GooglePlacesAutocomplete className='bg-slate-950 border border-solid border-orange-400'>
        apiKey={import.meta.env.VITE_GOOGLE_PLACE_API_KEY}
      </GooglePlacesAutocomplete>

And I have added the script tag to my index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/logowanderly.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wanderly</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://maps.googleapis.com/maps/api/js?key=VITE_GOOGLE_PLACE_API_KEY&libraries=places"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Need help with this ASAP(PS: the value that I have entered for my key is absolutely correct).

I tried checking my key and making a new key but nothing is helping.