InvalidKeyMapError (Google Maps api ) in deployment on Vercel

Question

So I have built a web app with Next.js and I have used from @react-google-maps/api. Everything is working on my localhost, but now when I deployed it on Vercel I get an error that my key is invalid. I have already put the key in Environment Variable.

Exact error in console: Google Maps JavaScript API error: InvalidKeyMapError

Here is my GoogleMap component:

import React, { useContext } from "react";
import { GoogleMap, LoadScript } from "@react-google-maps/api";
import { UserLocationContext } from "../context/UserLocationContext";
import Marker from "./Marker";
import { SelectedBusinessContext } from "../context/SelectedBusinessContext";

function GoogleMap_() {
  const { userLocation, setUserLocation } = useContext(UserLocationContext);
  const { selectedBusiness, setSelectedBusiness } = useContext(
    SelectedBusinessContext
  );
  const containerStyle = {
    width: "100%",
    height: "500px",
    borderRadius: 20,
  };

  return (
    <div>
      <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY}>
        {userLocation ? (
          <GoogleMap
            mapContainerStyle={containerStyle}
            center={
              !selectedBusiness.name
                ? {
                    lat: parseFloat(userLocation.lat),
                    lng: parseFloat(userLocation.lng),
                  }
                : selectedBusiness.geometry.location
            }
            zoom={selectedBusiness.name ? 15 : 10}
          >
            <>
              <Marker userLocation={userLocation} />
            </>
          </GoogleMap>
        ) : null}
      </LoadScript>
    </div>
  );
}

export default GoogleMap_;

My .env is looking like this:

GOOGLE_API_KEY="A...E"
NEXT_PUBLIC_GOOGLE_API_KEY=A...E

I have made the key unrestricted in order to prevent those errors of not providing a safe URL...

It's working on localhost but not on Vercel