How do i use props passed to this component as state

[verbowersock]

How do i use props to make this computer reusable? I tried to initialize with useEffect but it didn't work. The list is blank unless i explicitly specify the options in usestate

const MyDropdown = ({ data, label, field, onSelect, value }) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [dropdownValue, setDropdownValue] = useState(null);
  const [dropdown, setDropdown] = useState(data);

  useEffect(() => {
    setDropdown(data);
  }, [data]);

  const renderItem = ({ item }) => {
    return <Item item={item} onPress={() => console.log(item.id)} />;
  };

  return (
    <DropDownPicker
      style={styles.dropdown}
      open={dropdownOpen}
      value={dropdownValue} //genderValue
      items={dropdown}
      setOpen={setDropdownOpen}
      setValue={setDropdownValue}
      setItems={setDropdown}
      placeholder={label}
      placeholderStyle={styles.placeholderStyles}
      onChangeValue={onSelect}
      zIndex={3000}
      zIndexInverse={1000}
    />
  );
};