I have a form which includes a select dropdown (items are populated via an API call). When I leave the screen I would like to be able to reset this back to its initial state (default state is a placeholder - Select Event).

I can clear text and textarea inputs within a useFocusEffect() but struggling with understanding how to reset a select dropdown.

To reset the select dropdown I have tried setEventTypeData([]); but when navigating back to the screen, the last selected option is still selected (text inputs have been cleared though).

export const CreateNewEvent = ({navigation}) => {
  const globalContext = useContext(AppContext);
  const userId = globalContext.userInfo.id;
  // dropdown populated with this
  const [eventTypeData, setEventTypeData] = useState([]);
  const [newEventDescription, setEventDescription] = useState('');
  const [newEventLimit, setEventLimit] = useState(0);

  const clearFormData = () => {
    setEventTypeData([]); // tried setting back to original state but does not work
    setEventDescription('');
    setEventLimit(0);
  };

  useFocusEffect(
    React.useCallback(() => {
      const body = JSON.stringify({userId});
      fetch(eventTypesUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: body,
      })
      .then(response => response.json())
      .then(json => setEventTypeData(json))
      .catch(error => console.error(error))
      .finally(() => setLoading(false));

    return () => {
      // Run logic when the user leaves screen,
      // Clear form
      clearFormData();
    };
  }, [userId]),
);

// Select Dropdown
{/* Event Name Select Field */}

  Select Event
  
    updateEventNameAndDescription(newEventName)
  }
    placeholder="Select Event"
    {eventTypeData.map(event => (
      
     ))}
  
}

How can I ensure that when navigating back to this screen that the Select dropdown is reset to its original state?