Can't use picker more than 2

[fbryo21]

I followed your way by adding 1 more picker, but when I click on the third picker, the list doesn't appear at all. Below is my code:

import DropDownPicker from "react-native-dropdown-picker";

export default function VendorSaya() {
  const [countryOpen, setCountryOpen] = useState(false);
  const [cityOpen, setCityOpen] = useState(false);
  const [open, setOpen] = useState(false);

  const onCountryOpen = useCallback(() => {
    setCityOpen(false);
  }, []);

  const onCityOpen = useCallback(() => {
    setCountryOpen(false);
  }, []);

  const onOpen = useCallback(() => {
    setOpen(false);
  }, []);

  const [value, setValue] = useState(null);
  const [items, setItems] = useState([
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Tes", value: "tes" },
  ]);

  return (
    <>
      <DropDownPicker
        open={countryOpen}
        onOpen={onCountryOpen}
        value={value}
        items={items}
        setOpen={setCountryOpen}
        setValue={setValue}
        setItems={setItems}
        zIndex={3000}
        zIndexInverse={1000}
      />
      <DropDownPicker
        open={cityOpen}
        onOpen={onCityOpen}
        value={value}
        items={items}
        setOpen={setCityOpen}
        setValue={setValue}
        setItems={setItems}
        zIndex={2000}
        zIndexInverse={2000}
      />
      <DropDownPicker
        open={open}
        onOpen={onOpen}
        value={value}
        items={items}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        zIndex={1000}
        zIndexInverse={3000}
      />
    </>
  );
}

[hossein-zare]

Here, when the picker opens you close it.

const onOpen = useCallback(() => {
    setOpen(false);
}, []);