Ready usePlacesAutocomplete bug with react

Question

I'm struggling with usePlacesAutocomplete in a project. In the code, when I first display the component, 'ready' becomes true and I can get my autosuggestions. However, when I validate the first autosuggestion, change pages, and then return to the page to type a second address, 'ready' does not become true. Even if I remove "disabled={!ready}", I can use the input, but the autosuggestion does not work. It only works if I completely reload the page, which is not what I want. Do you have any idea what the problem might be? Thanks in advance.I am using next js.

import React, { useEffect, useState } from "react";
import { useLoadScript } from "@react-google-maps/api";
import { useRouter } from "next/router";
import { useDispatch, useSelector } from "react-redux";
import {
  updateAddress,
  updateAddressCoordinate,
  updateFormAddressStatus,
  updateIsReady,
} from "../../../redux/action";
import usePlacesAutocomplete, {
  getGeocode,
  getLatLng,
} from "use-places-autocomplete";

// Component de form pour entrer une adresse
export default function TestFormAddress(props) {
  const router = useRouter();
  // Props qui sont passées depuis le parent
  const placeholder = props.placeholder;
  const color = props.color;
  const key = props.key;

  // Chargement de la bibliothèque Google Places API
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.GOOGLE_API_KEY,
    libraries: ["places"],
  });

  // Si la bibliothèque n'est pas chargée, retourner un message de chargement
  if (!isLoaded)
    return (
      <div
        className={
          color !== undefined
            ? "border flex items-center text-purple rounded-lg placeholder:text-slate-400 px-3 w-full h-12 border-" +
              color
            : "border flex items-center text-purple rounded-lg placeholder:text-slate-400 px-3 w-full h-12 border-purple"
        }
      >
        Loading...
      </div>
    );

  // Sinon retourner le composant Map
  return <Map placeholder={placeholder} color={color} />;
}

const Map = (props) => {
  // Props qui sont passées depuis le parentx
  const placeholder = props.placeholder;
  const color = props.color;

  // Utilisation du hook useRouter pour récupérer l'URL courante
  const router = useRouter();
  const currentUrl = router.asPath;

  // Utilisation du hook useDispatch pour dispatch une action
  const dispatch = useDispatch();

  // État pour stocker la localisation sélectionnée
  const [selected, setSelected] = useState(null);

  // Récupération du state global via le hook useSelector
  const state = useSelector((state) => state);

  useEffect(() => {
    currentUrl === "/estimation-immobiliere"
      ? dispatch(updateFormAddressStatus(true))
      : null;
  }, [router.pathname]);

  // Hook pour utiliser l'autocompletion de Google Places
  const {
    ready,
    value,
    setValue,
    suggestions: { status, data },
    clearSuggestions,
  } = usePlacesAutocomplete();

  useEffect(() => {
    let timeoutId = null;

    if (!ready) {
      timeoutId = setTimeout(() => {
        dispatch(updateIsReady(true));
        // window.location.reload();
      }, 2000);
    }

    return () => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
    };
  }, [ready]);

  // Fonction pour sélectionner une adresse et obtenir ses coordonnées
  const handleSelect = async (description) => {
    setValue(description, false);
    dispatch(updateAddress(description));
    const results = await getGeocode({ address: description });
    const { lat, lng } = await getLatLng(results[0]);
    setSelected({ lat, lng });
    clearSuggestions();
  };

  const handleSelected = () => {
    if (value !== "") {
      window.location.reload();
    } else null;
  };

  useEffect(() => {
    selected !== null ? dispatch(updateAddressCoordinate(selected)) : null;
  }, [selected]);

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        disabled={!ready}
        onClick={handleSelected}
        className={
          color !== undefined
            ? "border text-purple rounded-lg placeholder:text-slate-400 px-3 w-full h-12 border-" +
              color
            : "border text-purple rounded-lg placeholder:text-slate-400 px-3 w-full h-12 border-purple"
        }
        placeholder={placeholder !== undefined ? placeholder : null}
      />
      <div>
        <ul className={"bg-white"}>
          {data &&
            data.length > 0 &&
            status === "OK" &&
            data.map(({ place_id, description }) => (
              <li
                key={place_id}
                onClick={() => handleSelect(description)}
                className="text-purple cursor-pointer mx-3 my-3 hover:font-bold z-50"
              >
                {description}
              </li>
            ))}
        </ul>
      </div>
    </div>
  );
};

I really tried everything according to me and I would like to understand where is the error