Remove oval shape when active when using material bottom tabs - react-native

Question

I'm using #react-navigation/material-bottom-tabs and have an issue with the tab icons in the bottom tab navigator. The problem is an oval shape, as the background shows up when that tab is selected.
This is what it looks like:
So far I didn't find any way to remove it.
import React, { Component } from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import HomeScreen from "./Screens/Home";
import NotificationScreen from "./Screens/Notifications";
import ProfileScreen from "./Screens/Profile";
import SearchScreen from "./Screens/Search";
import { createMaterialBottomTabNavigator } from "#react-navigation/material-bottom-tabs";
import { NavigationContainer } from "#react-navigation/native";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
const Tab = createMaterialBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
shifting={true}
initialRouteName="Home"
activeColor="#fff"
inactiveColor="#333"
barStyle={{ backgroundColor: "tomato" }}
labeled={true}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
tabBarColor: "blue",
}}
/>
<Tab.Screen
name="Notifications"
component={NotificationScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="heart" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="account-circle"
color={color}
size={26}
/>
),
}}
/>
<Tab.Screen
name="Search"
component={SearchScreen}
options={{
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="magnify" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
I have tried many ways to remove it, but I haven't found anything that works.