I’m working on a basic weather app practising React Query. I want to add location data to Firestore using useMutation. However, I’m having trouble adding the location to Firestore. The logic doesn’t seem to throw any errors, but the location is not being saved in Firestore.

Code:

export const WeatherPage = () => {
  const { city } = useParams();
  const { data, isLoading, isError, isSuccess } = useGetWeather(city ?? "");

  const addLocation = async (location: string | undefined) => {
    if (!location) return;

    console.log(location) // don't get any output

    await setDoc(doc(db, "saved-locations", location), {
      location: location,
    });
  };

  const mutation = useMutation(addLocation);

  return (
    <div className="weather-page">
      <div className="data">
        {isLoading && <p>Loading...</p>}
        {isError && <p>Failed to load</p>}
        {isSuccess && (
          <>
            <div className="top">
              <p>{data?.name}</p>
              <h1>{data && Math.round(data?.main.temp - 273)}°C</h1>
              <p>{data?.weather[0].description}</p>
            </div>
            <ul className="bottom">
              <li>
                <span>Feels like:</span>{" "}
                {data && Math.round(data?.main.feels_like - 273)}°C
              </li>
              <li>
                <span>Wind:</span> {data?.wind.speed}km/h
              </li>
              <li>
                <span>Pressure:</span> {data?.main.pressure}hPa
              </li>
              <li>
                <span>Humidity:</span> {data?.main.humidity}%
              </li>
            </ul>
            <button onClick={() => mutation.mutate(data?.name)}>add</button>
          </>
        )}
      </div>
    </div>
  );
};