React Native - Dropdown Value change doesn't reset the state of the subcomponents

Let's say I have a RNPickerSelect component on which I switch between subcomponents.

The values of the subcomponents are 1. Flight and 2. Car

The problem is: If switch from flight to car, the state of the components inside Flight don't reset but instead keep their values. For example if I write 'Test' in the Airline Field -> I switch to Car value in the dropdown and I comeback to the Flight one, the value is still there.

Flight component:

 const [routes, setRoutes] = useState<IRoute[]>([initialRoute]);    {routes.map((value: IFlightRoute, index: number) => (<RouteFields airline={value.airline} setAirline={airline => setFieldValue(airline, 'airline', value.id, routes, setRoutes)}/>       ))}

The setField Function that is used to reset the airline state

export const setFieldValue = (  value: string,  field: string,  id: number,  routes: IRoute[],  setRoutes: (updatedRoutes: IRoute[]) => void): void => {  const updatedRoutes = routes.map(rt => {    if (rt.id === id) {      rt[field] = value;    }    return rt;  });  setRoutes(updatedRoutes);};

The content of RouteFields

<FlightAirline setAirline={setAirline} airline={airline} />

And the Airline component itself

<Airline airline={airline} setAirline={setAirline} emptyField={emptyAirline} />export const Airline = ({ setAirline, airline }: AirlineProps): JSX.Element => {  return (<TextInput      title={getAirline +' (optional)'}      value={airline}      onChangeText={el => {        setAirline(el);      }}    />  );};

I have tried to add this to the Airline component but it doesn't do the trick when I switch the RNPickerSelect value

  navigation.addListener('focus', () => {    setAirline('');  });  navigation.addListener('blur', () => {    setAirline('');  });