Unresponsive button after navigating to a screen

How to / Third Party Tooling
1

Hello, in my app after I navigate to another screen in drawer navigation and go back to previous screen, I am still interacting with first screen. This only happens when navigating from screen up in the drawer to screen that is lower on the list. E.g. going from search to map (code below) causes that when I return to search, I am still interacting with map screen.
This is the code for my drawer navigation:

import { createDrawerNavigator, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {View, StyleSheet} from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { enableScreens } from 'react-native-screens';
import {
    useTheme,
    Avatar,
    Title,
    Caption,
    Paragraph,
    Drawer,
    Text,
    TouchableRipple,
    Switch
} from 'react-native-paper';
import Settings from './Script.js';
import Home from './Script2.js';
import Search from './Search.js';
import Map from './Map.js';

// drawer navigation options
const Drawers = createDrawerNavigator();
enableScreens();
function DrawerContent(props, {navigation}) {
  return (
    <View style={{flex: 1}}>
      <DrawerContentScrollView {...props}>
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem label="Home" icon={() => <MaterialIcons name="home" size={20}/>} onPress={() => props.navigation.navigate('Home')}/>
        </Drawer.Section>
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem label="Search" icon={() => <MaterialIcons name="search" size={20}/>} onPress={() => props.navigation.navigate('Search')}/>
        </Drawer.Section>
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem label="Map" icon={() => <MaterialIcons name="map" size={20}/>} onPress={() => props.navigation.navigate('Map')}/>
        </Drawer.Section>
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem label="Profile" icon={() => <MaterialIcons name="supervised-user-circle" size={20}/>} onPress={() => props.navigation.navigate('Search')}/>
        </Drawer.Section>
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem label="Settings" icon={() => <MaterialIcons name="settings" size={20}/>} onPress={() => props.navigation.navigate('Search')}/>
        </Drawer.Section>
        <Drawer.Section>
          <DrawerItem label="Help" icon={() => <MaterialIcons name="help" size={20}/>} onPress={() => alert('Link to help')} />
        </Drawer.Section>
        <Drawer.Section style={styles.bottomDrawerSection}>
          <DrawerItem label="Sign In" icon={() => <MaterialIcons name="login" size={20}/>} onPress={() => props.navigation.navigate('Search')}/>
        </Drawer.Section>
      </DrawerContentScrollView>
    </View>
  );
};

export default function MyDrawer() {
    return (
            <Drawers.Navigator initialRouteName="Home" drawerStyle={{backgroundColor: '#FFD700', paddingTop: '20%'}} drawerContent={props => <DrawerContent {...props} />}>
                <Drawers.Screen name="Home" component={Home} />
                <Drawers.Screen name="Search" component={Search} />
                <Drawers.Screen name="Map" component={Map} />
                <Drawers.Screen name="Profile" component={Home} />
                <Drawers.Screen name="Settings" component={Home} />
                <Drawers.Screen name="Sign In" component={Home} />
            </Drawers.Navigator>
    );
}

const styles = StyleSheet.create({
  bottomDrawerSection: {
    marginBottom: 15,
    borderTopColor: 'gold',
    borderTopWidth: 1
  },
});

If anyone has any experience with this, I would appreciate some help.