Как очистить состояние в компоненте класса в React Native?

Я новичок в React Native и изо всех сил пытаюсь очистить состояние экрана.

Например, экран A имеет некоторые состояния --> экран B, вернемся к экрану A, старые состояния очищены. Я использую React Navigation V5.

Я пытаюсь сделать следующее:

1. После перехода от MainMap.js к последнему экрану TripsListScreen.js (весь процесс представляет собой стек из 4 экранов, вложенных в ящик), я получил все данные, хранящиеся в хранилище Redux, и отобразил их в TripsListScreen.
2. Проблема в том, что когда я нажимаю кнопку add в TripsListScreen, чтобы вернуться в MainMap.js, она не очищает каждое состояние, как я ожидал.

Вот состояния MainMap.js :

const initialState = {
    hasMapPermission: false,
    _userLocationDisplayed: null,
    userLatitude: 0,
    userLongitude: 0,
    initial_UserLatitude: 0,
    initial_UserLongitude: 0,
    userLocationAddress: '',

    destination: [],
    destinationName: [],
    destinationAddress: [],
    destinationCoords: [],
    destinationImageUri: [],

    numOfInput:[0,1],
    counter: 1,
    wayPoints: [],
    markers: [],
}

class MainMap extends React.Component{

    constructor(props){
        super(props);

        this.state = initialState;


    };


    componentDidMount(){
        console.log('Hello',this.props)
        if(this.props.route.params === true){
            this.setState(initialState)
        }
        this._requestUserLocation();
    };

По сути, я попытался передать логический параметр от TripsListScreen до MainMap, и если параметр верен, я верну все состояния в начало. Однако это не работает так, как ожидалось.

Вот TripsListScreen:

//...
<Layout style={styles.bottom}>
      <TouchableOpacity onPress={() => props.navigation.navigate('PlanningProcess', {
            screen: 'MainMapScreen',
            params: {doAddPlace: true}
      })} style={styles.createTrip}>
          <Layout style={styles.button} >
               <Icon name='add' size={35} />
          </Layout>
      </TouchableOpacity>
</Layout>
//...

Вот навигация:

1. StackNavigators:

const Stack = createStackNavigator();

const StackNavigator = (props) => {
    return(
        <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name='MainMapScreen' component={MainMap} />
            <Stack.Screen name='TripDescription' component={TripDescription} />
            <Stack.Screen name='TripsListDetailScreen' component={TripsListDetailScreen} />
            <Stack.Screen
                name='TripsListScreen' 
                component={TripsListScreen} 
                options={{
                    headerLeft: () => (<Icon style={{marginHorizontal: 30, marginTop: 30}} color='white' name='menu' size={30} onPress={() => props.navigation.dispatch(DrawerActions.openDrawer())}/>),
                    title:'Something'
                    }}
            />
        </Stack.Navigator>
    );
};
export default StackNavigator;

2. Основное Navigators:

const Navigator = () => {

    return(
        <NavigationContainer>
            <Drawer.Navigator
                statusBarAnimation='slide'
                drawerContent={props => 
                    <DrawerContent {...props} />}>
                <Drawer.Screen name='Welcome' component={WelcomeStackScreen}  />
                <Drawer.Screen name='TripsListScreen' component={TripsListScreen} />
                <Drawer.Screen name='PlanningProcess' component={StackNavigators} />
            </Drawer.Navigator>

        </NavigationContainer>
    );
};


export default Navigator;

Вот что отображает MainMap:

Это то, что я ожидал при переходе от TripsListScreen (для создания новой поездки):

ПОЖАЛУЙСТА, ПОМОГИТЕ!!!