i am using react-native-multiple-select in order to let users pick countries. Now, when they press Submit Button, the selection is correctly submitted to db. When an API call is made to fetch this data, i want the previously stored countries to already be selected upon opening the dropdown and let users freely add or remove items, and not make them start over from 0 again. Current code retrieves the stored data but will not let me add new countries and remove the retrieved one.

const [selectedItems, setSelectedItems] = useState([]);
const [initialArray, setInitialArray] = useState([]);

const onSelectedItemsChange = (selectedItems) => {
    // Set Selected Items
    setSelectedItems(selectedItems);
  };

  const onAddItem = (selectedItems) => {
    // Set Selected Items
    setInitialArray([...initialArray, selectedItems]);
  };

  return (

        <MultiSelect
          canAddItems= {true}
          hideTags
          items={countries}
          uniqueKey="name"
          onSelectedItemsChange={onSelectedItemsChange}
          onAddItem={onAddItem}
          selectedItems={initialArray}
          single={false}
          selectText="Edit Countries Visited"
          searchInputPlaceholderText="Search countries visited..."
          onChangeInput={(text) => console.log(text)}

        />