How to fix the react select dropdown for country-state-city not working properly

Question

I am creating a MERN stack user management system. I am using country-state-city to create 3 dropdowns using react select. If the form is in edit mode the country state city values get populated by the current passed user values. As soon as I change the country dropdown, the city and the state dropdowns do not get updated based on the selected country. It changes only when I manually clear the dropdowns. can anyone help with a solution?

import React, { useState } from "react";
import Form from "../ui/Form";
import FormRow from "../ui/FormRow";
import { Country, City, State } from "country-state-city";
import Select from "react-select";

import { useForm, Controller } from "react-hook-form";
import Button from "../ui/Button";
import { useUser } from "./useUser";

import CustomMenuList from "./CustomMenuList";
import { useEditUser } from "./useEditUser";

export default function CreateUserForm({
userToEdit = {},
onCloseModal,
}) {
const [seletedCountry, setSelectedCountry] = useState(null) 
const [selectedState, setSelectedState] = useState(null);

const { isCreating, createCustomer } = useCreateCustomer();
const { isEditing, editCustomerdata } = useEditCustomer();

const isWorking = isCreating || isEditing;

const { _id: userId, ...editValues } = userToEdit;
const isEditSession = Boolean(userId);

const {
 register,
 handleSubmit,
 watch,
 reset,
 getValues,
 control,
 setValue,
 formState,
} = useForm({
 defaultValues: isEditSession ? editValues : {},
});

const { errors } = formState;

 return (
 <Form
   onSubmit={handleSubmit(onSubmit, onError)}
   className="px-5 py-4  bg-white"
 >     
<FormRow label="Country" errors={errors?.country?.message}>
     <Controller
       name="country"
       control={control}
       rules={{ required: "Please enter country" }}
       render={({ field }) => (
         <Select
           components={{ MenuList: CustomMenuList }}
           disabled={isWorking}
           isClearable
           {...field}
           onChange={(change) => {
             setValue("country", change, { shouldDirty: true });
             setSelectedCountry(change);
           }}
           options={Country.getAllCountries()}
           getOptionLabel={(options) => {
             return options["name"];
           }}
           getOptionValue={(options) => {
             return options["name"];
           }}
         />
       )}
     />
   </FormRow>

   <FormRow label="State" errors={errors?.state?.message}>
     <Controller
       name="state"
       control={control}
       rules={{ required: "Please enter State" }}
       render={({ field }) => (
         <Select
           components={{ MenuList: CustomMenuList }}
           isClearable
           disabled={isWorking}
           {...field}
           onChange={(change) => {
             setValue("state", change, { shouldDirty: true });
             setSelectedState(change);
           }}
           options={State?.getStatesOfCountry(seletedCountry?.isoCode)}
           getOptionLabel={(options) => {
             return options["name"];
           }}
           getOptionValue={(options) => {
             return options["name"];
           }}
         />
       )}
     />
   </FormRow>

   <FormRow label="City" errors={errors?.city?.message}>
     <Controller
       name="city"
       disabled={isWorking}
       control={control}
       render={({ field }) => (
         <Select
           components={{ MenuList: CustomMenuList }}
           isClearable
           {...field}
           onChange={(change) => {
             setValue("city", change, { shouldDirty: true });
             setSelectedCity(change);
           }}
           options={City.getCitiesOfState(
             selectedState?.countryCode || "",
             selectedState?.isoCode || ""
           )}
           getOptionLabel={(options) => {
             return options["name"];
           }}
           getOptionValue={(options) => {
             return options["name"];
           }}
         />
       )}
     />
   </FormRow>
     <FormRow>
     <Button
       type="reset"
       variation="cancel"
       onClick={() => onCloseModal?.()}
     >
       Cancel
     </Button>
     <Button disabled={isWorking} variation="secondary">
       {isEditSession ? "Edit User" : "Create new user"}
     </Button>
   </FormRow>
 </Form>
);
}