React Native doesn't accept a white border bottom at select icons (tabbar)

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Entypo, Feather } from 'react-native-vector-icons';

//import { HomeScreen } from './src/screens/HomeScreen';
//import { TasksScreen } from './src/screens/TasksScreen';
//import { SettingsScreen } from './src/screens/SettingsScreen';

function TasksScreen({navigation}) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Tasks!</Text>
    </View>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center',
     alignItems: 'center', backgroundColor: "#ffffff" }}>
      <Text>Olá, Usuário!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'  }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator 
      screenOptions={{
        tabBarActiveTintColor: "#A0D800",
        tabBarInactiveTintColor: "#FFFFFF",
        tabBarActiveBackgroundColor: "#FFFFFF",
        tabBarInactiveBackgroundColor: "#000000",
        
        headerShown: false,
        

        tabBarSelectedItemStyle: {
          borderBottomWidth: 2,
          borderBottomColor: 'red',
        },
        
        tabBarStyle: [
          {
            display: "flex",
            backgroundColor: "#000000",
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
            height: 70,
            overflow: 'hidden',
            alignItems: 'center',
            justifyContent: 'center', 
            
            
          },
          
          null,
        ], 
        tabBarHideOnKeyboard: true,

        


        tabBarLabelStyle:{

          //fontSize: 20,
          //fontWeight: 'bold',
          
          backgroundColor: "#000000",
          width: 60,
          flex: 0.000004,
          
         

        },

        
      }}
      >
          
        <Tab.Screen name="  " 
        component={TasksScreen}
        options={{
          tabBarIcon: ({ color}) => (
            <Entypo name="add-to-list" 
            size={30}
            color={color}
            
             />
            )
        }}
         />

<Tab.Screen name=" " 
        component={HomeScreen}
        options={{
          tabBarIcon: ({ color}) => (
            <Feather name="home" 
            size={30}
            color={color}
             />
            )
        }} />
        
        
        <Tab.Screen name="   " 
        component={SettingsScreen}
        options={{
          tabBarIcon: ({ color}) => (
            <Feather name="settings" 
            size={30}
            color={color}
            
             />
            )
        }}
         />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

The code doesn't accept underline selected item in Tab Bar, a want knows the reason The code doesn't accept underline selected item in Tab Bar, a want knows the reason The code doesn't accept underline selected item in Tab Bar, a want knows the reason The code doesn't accept underline selected item in Tab Bar, a want knows the reason The code doesn't accept underline selected item in Tab Bar, a want knows the reason