Bottom Navigation | React Native - react-native

Question

I use react-native-paper to implement Bottom Navigation.
I have a BottomNav element. It is located on the main page of the application - Feed Page. When I click on the icon in BottomNav to go to the MapScreen page nothing happens. Help solve the problem.
BottomNav
import React from "react";
import { StyleSheet } from "react-native";
import { BottomNavigation } from "react-native-paper";
import { MapScreen } from "../screens/";
export default class BottomNav extends React.Component {
state = {
index: 0,
routes: [
{ key: "Feed", title: "Feed", icon: "photo-album", color: "#6200ee" },
{ key: "MapScene", title: "MapScene", icon: "inbox", color: "#2962ff" }
]
};
render() {
return (
<BottomNavigation
style={styles.BottomNav}
navigationState={this.state}
onIndexChange={index => this.setState({ index })}
renderScene={BottomNavigation.SceneMap({
Feed: MapScreen,
MapScene: MapScreen
})}
/>
);
}
}
MapScreen
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { HeaderProfile } from "../uikit/";
export default class MapScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
active: "bookmark-border"
};
}
render() {
return (
<View style={styles.MapScreen}>
<View style={styles.Header}>
<HeaderProfile />
</View>
<Text> Text </Text>
</View>
);
}
}
const styles = StyleSheet.create({
MapScreen: {
backgroundColor: "#1f1f1f",
height: "100%",
flex: 1,
width: "100%"
},
Header: {
marginTop: 24
}
});
export { MapScreen };