Why isn't react-google-autocomplete working correctly on my deployment?

Question

I am using react-google-autocomplete in my web application. I am using it with AntDesign's Input component and it all works fine locally, but does not work on my deployment. The configurations on Google Cloud Console are all correct, there's no CORS or SSL certification issues either.

import React, { useState, useRef, useEffect } from "react";
import { Input } from "antd";
import Autocomplete, { usePlacesWidget } from "react-google-autocomplete";

interface PlaceComponentProps {
    workLocation?: string;
    setWorkLocation?: (newValue: string) => void;
}

function PlaceComponent({
    workLocation = '',
    setWorkLocation,
}: PlaceComponentProps) {
    const [inputValue, setInputValue] = useState(workLocation);
    const antInputRef = useRef<any>(null);

    const { ref: placesRef } = usePlacesWidget({
        apiKey: process.env.NEXT_PUBLIC_PLACES_API_KEY,
        onPlaceSelected: (place) => {
            setInputValue(place?.formatted_address || "");
            if (setWorkLocation) {
                setWorkLocation(place?.formatted_address || "");
            }
        },
    });

    useEffect(() => {
        if (antInputRef.current) {
            // @ts-ignore
            placesRef.current = antInputRef.current.input;
        }
    }, [placesRef]);

    return (
        <Input
            ref={antInputRef}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            size="large"
        />
    );
}

export default PlaceComponent;

On the deployment, the input field has no placeholder and does not provide any place suggestions either.

I've tried explicitly whitelisting the domain, removing all restrictions and triple checked the .env. Nothing seems to work.