How to filter cities based on province selected in dropdown

I’m developing a web app feature where the City dropdown values should filter based on the selected Province. Currently, when you select either the Province or the City dropdown, it doesn’t filter at all.

Here’s what I’ve tried so far but it doesn’t work:

Header component (attempted filtering logic lives here):

export const Header = ({ data, isLoading, error }: HeaderProps) => {
  ...

  // Bring in global state
  const {
    provinceDropdownFilter,
    cityDropdownFilter,
  } = useFilterStore();

  const filteredData = data.map((group) => group.equipments).flat();

  ...

  const handleDropdownFilterProvince = (
    e: React.ChangeEvent<HTMLSelectElement>
  ) => {
    useFilterStore.setState({ provinceDropdownFilter: e.target.value });

    // Filter the data based on the selected province
    const filteredCities = filteredData
      .filter((item) => item.state === e.target.value)
      .map((item) => item.city);

    // Set the filtered city dropdown options
    useFilterStore.setState({ cityDropdownFilter: filteredCities });
  };

  ...

  return (
    <>
      ...
          <Dropdown
            data={data}
            value={provinceDropdownFilter}
            onChange={handleDropdownFilterProvince}
            filterType="state"
          />
          <Dropdown
            data={data}
            value={cityDropdownFilter}
            onChange={handleDropdownFilterCity}
            filterType="city"
          />
      ...
    </>
  );
};

Dropdown component:

export const Dropdown: React.FC<DropdownProps> = ({
  data,
  onChange,
  value,
  filterType,
}) => {
  ...

  const filteredData = data.map((group) => group.equipments).flat();

  // Filter the data based on the filterType
  const filteredOptions = filteredData.filter((i) => {
    if (filterType === "manufacturer") {
      return i.manufacturer;
    }
    if (filterType === "state") {
      return i.state;
    }
    if (filterType === "city") {
      return i.city;
    }

    return false;
  });

  ...

  return (
    <>
      <Select
        aria-label="Select"
        placeholder={getCustomPlaceholder(filterType) as string}
        value={value}
        onChange={handleFilters}
      >
        {Array.from(uniqueValues)
          .sort()
          .map((value) => (
            <option key={value} value={value}>
              {value}
            </option>
          ))}
      </Select>
    </>
  );
};

Zustand Store:

const useFilterStore = create<FilterState>(
  zukeeper((set: any) => ({
    ...
    provinceDropdownFilter: "",
    cityDropdownFilter: "",
    ...
    setProvinceDropdownFilter: (value: string) =>
      set({ provinceDropdownFilter: value }),
    setCityDropdownFilter: (value: string) =>
      set({ cityDropdownFilter: value }),
    ...
  }))
);