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

Question

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('');
  });