This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError. It's driving me mad

So I am trying to set up a autocomplete function on my application using Google Maps API.

I am using React.js, and in my index.html file I have put in the tags:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=*key*"></script>

Then I have stored the functionality on the client side under LocationTracker.js

/* global google */

import { useState, useEffect } from "react";
import axios from "axios";
import "./LocationTracker.css";
import { IoLocationOutline } from "react-icons/io5";
import { FaSpinner } from "react-icons/fa"; // Import spinner icon

export default function LocationTracker() {
    const apiKey = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

// React state for address, error, and loading
const [address, setAddress] = useState("");
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);

useEffect(() => {
    if (window.google && window.google.maps) {
        // Make sure google.maps is available before trying to use it
        new google.maps.places.Autocomplete(
            document.getElementById("autocomplete")
        );
    }
}, []); // Empty array ensures this runs only once after component mounts

const getAddressFrom = (lat, long) => {
    setLoading(true); // Start loading

    axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=${apiKey}`)
        .then(response => {
            if (response.data.error_message) {
                console.log(response.data.error_message);
                setError(true);
            } else {
                setAddress(response.data.results[0].formatted_address);
                setError(false);
            }
        })
        .catch(() => {
            setError(true);
        })
        .finally(() => {
            setLoading(false); // Stop loading
        });
};

const findLocation = () => {
    if (navigator.geolocation) {
        setError(false);
        setLoading(true); // Start loading when clicking the button
        navigator.geolocation.getCurrentPosition(
            position => {
                getAddressFrom(position.coords.latitude, position.coords.longitude);
            },
            () => {
                setError(true);
                setLoading(false); // Stop loading on error
            }
        );
    } else {
        setError(true);
    }
};

const handleInputChange = (event) => {
    setAddress(event.target.value);
};

return (
    <div id="locationPg">
        <h1>Location Tracker</h1>

        <div id="locationTrackerContainer">
            {error && (
                <div id="failedGeolocationContainer">
                    <h2>Geolocation is not permitted</h2>
                </div>
            )}

            <div id="locationInputContainer">
                <input 
                    type="text"
                    placeholder="Enter address"
                    value={address}
                    onChange={handleInputChange}
                    id="autocomplete"
                />

                {/* Change icon based on loading state */}
                {loading ? (
                    <FaSpinner className="spinner-icon" />
                ) : (
                    <IoLocationOutline onClick={findLocation} id="locationButtonIcon" />
                )}
            </div>
        </div>
    </div>
);

}

I also have another function that allows users with the press of a button (and when location is enabled) to show their location in the input bar. This works perfectly

I have also ensured that my

Maps JavaScript API Places API (New) Geolocation API Geocoding API

are all enabled on my Google Cloud Console.

I have also set up billing for the project that this api key is part of, and these apis are all enabled.

why then when i try and use the autocomplete does it always say in my console

This API project is not authorized to use this API. Places API error: ApiNotActivatedMapError

The Places API is in "Legacy" status as of March 1. From the developer docs (only present in English version):

This product or feature is in Legacy status and cannot be enabled for new usage.

The Places API has also been replaced, by the Places API (new). If you still want to use the old Places API, or if you are still having the issue even on the new Places API, you can manually activate the old one by going to this link. You might also need to edit the API Key API Restrictions and add the Places API to it. This will fix your issue.