let country = form.watch("country");
  let city = form.watch("city");

  const handleCountryChange = useCallback(async () => {
    setIsCountrySelected(false);
    const selectedCountry = form.getValues("country");
    try {
      const response = await fetch(
        "https://countriesnow.space/api/v0.1/countries/cities",
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ country: selectedCountry }),
        },
      );

      if (!response.ok) {
        throw new Error("Failed to fetch cities");
      }

      const data = await response.json();

      const cities = data.data;

      setCities(cities);
      setIsCountrySelected(true);

      return cities;
    } catch (error) {
      console.error("Error fetching cities:", error);
    }
  }, [country]);