React navigation hide drawer item - reactjs

Question

I am using React navigation 5.
I have a settings icon in the header that routes to the Setting Screen. So i want to hide the routes from the drawer.
Here's my code.
My CustomDrawerContent i have
const newState = { ...state };
newState.routes = newState.routes.filter((item) => item.name !== "Setting");
Its render function has:
<DrawerItemList state={newState} {...props} />
still the drawer item for settings has an empty container there. When i do console.log(newState.routes) it doesn't have setting.
Entire file is below
import React, { useContext } from "react";
import { View, StyleSheet } from "react-native";
import { connect } from "react-redux";
import {
Text,
Avatar,
ThemeContext,
Button,
Divider,
SocialIcon,
Icon,
} from "react-native-elements";
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from "#react-navigation/drawer";
import { signOut } from "../store/actions/authActions";
const CustomDrawerContent = (props) => {
const { theme } = useContext(ThemeContext);
const { state } = props;
const signOut = props.signOut;
const newState = { ...state };
newState.routes = newState.routes.filter((item) => item.name !== "Setting");
return (
<View style={{ flex: 1, backgroundColor: "#f5f5f5" }}>
<DrawerContentScrollView {...props}>
<View style={{ paddingVertical: 10, paddingHorizontal: 45 }}>
{/* View for profile pic area */}
<View
style={{
display: "flex",
flexDirection: "column",
marginTop: 25,
}}
>
<Avatar
size="large"
rounded={true}
icon={{ name: "rocket", color: "orange", type: "font-awesome" }}
overlayContainerStyle={{ backgroundColor: "white" }}
onPress={() => console.log("Works!")}
activeOpacity={0.7}
containerStyle={{ flex: 1 }}
/>
<Text
style={{
fontSize: 18,
fontWeight: "bold",
paddingTop: 10,
color: "#555",
}}
>
Olivia Groza
</Text>
<Text style={theme.Text.captionStyles}>#Govliva</Text>
<Button title="Go Pro" containerStyle={{ marginTop: 10 }}></Button>
</View>
</View>
<Divider
style={{ margin: 10, backgroundColor: "#dddddd", height: 1 }}
></Divider>
{console.log(newState.routes)}
<DrawerItemList state={newState} {...props} />
<DrawerItem
icon={({ color, size }) => (
<Icon name="home" type="material-community" color={color} />
)}
label="Logout"
onPress={signOut}
/>
</DrawerContentScrollView>
<View style={styles.shareContainer}>
<SocialIcon type="twitter" iconSize={18} style={styles.iconContainer} />
<SocialIcon
type="facebook"
iconSize={18}
style={styles.iconContainer}
/>
<SocialIcon
type="instagram"
iconSize={18}
style={styles.iconContainer}
/>
</View>
</View>
// <DrawerContentScrollView {...props}>
// <DrawerItemList {...props} />
// <Text>adfafsd</Text>
// </DrawerContentScrollView>
);
};
const styles = StyleSheet.create({
shareContainer: {
paddingHorizontal: 10,
display: "flex",
flexDirection: "row",
// justifyContent: "center"
},
iconContainer: {
height: 40,
width: 40,
},
});
const mapStateToProps = (state) => {
return {};
};
const mapDispathToProps = (dispatch) => {
return {
signOut: () => dispatch(signOut()),
};
};
export default connect(mapStateToProps, mapDispathToProps)(CustomDrawerContent);