How can I change icon position using BottomNavigation.Bar in a Tab.Navigator

Hello, I would like to change to icon position at the bottom navbar to be centred. Currently, the icon is not vertically aligned (see image 1). I debugged it on react-devtools and the culprit is a "top" property which is set to 4 (see image 2) and in order for the icon to be centred I need to change it to top: 0. Does anybody know which props and in which component should I do this? I've tried in Tab.Screen, Tab.Navigator and BottomNavigation.Bar components with no success. The icon doesn't look vertically aligned in both Android Emulator and physical devices. Here's what I got in my navigator:

```
import { BottomTabScreenProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { CompositeScreenProps, CommonActions } from "@react-navigation/native"
import React from "react"
import { ViewStyle } from "react-native"
import { HomeScreen, MessagesScreen, SearchScreen, MyProfileScreen, TestScreen } from "../screens"
import { colors } from "../theme"
import { AppStackParamList, AppStackScreenProps } from "./AppNavigator"
import { observer } from "mobx-react-lite"
import { createNativeStackNavigator, NativeStackNavigationProp } from "@react-navigation/native-stack"
import HeaderBar from "../components/HeaderBar"
import { BottomNavigation, Icon } from 'react-native-paper';
import { ICONREGISTRY } from "app/const/iconRegistry"

export type MobileBottomNavigatorParamList = {
Home: undefined
Search: undefined
Messages: undefined
MyProfile: undefined
Test: undefined
HomeStack: undefined
SearchStack: undefined
MessagesStack: undefined
MyProfileStack: undefined
}

export type MobileBottomTabScreenProps = CompositeScreenProps<
BottomTabScreenProps,
AppStackScreenProps
>
export type HeaderNavigation = NativeStackNavigationProp

const Tab = createBottomTabNavigator()
const Stack = createNativeStackNavigator()

const HomeStack = observer(function HomeStack() {
return (
}} initialRouteName="Home">



)
})

const SearchStack = observer(function SearchStack() {
return (
}} initialRouteName="Search">


)
})

const MessagesStack = observer(function MessagesStack() {
return (
}} initialRouteName="Messages">


)
})

const MyProfileStack = observer(function MyProfileStack() {
return (
}} initialRouteName="MyProfile">


)
})

export const MobileBottomNavigator = () => {
return (
(
{
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});

if (event.defaultPrevented) {
preventDefault();
} else {
navigation.dispatch({
...CommonActions.navigate(route.name, route.params),
target: state.key,
});
}
}}
renderIcon={({ route, focused, color }) => {
const { options } = descriptors[route.key];
if (options.tabBarIcon) {
return options.tabBarIcon({ focused, color, size: 24 });
}

return null;
}}
getLabelText={({ route }) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.title;

return label;
}}
/>
)}
>
(

),
}}
/>

(

),
}}
/>

(

),
}}
/>

(

),
}}
/>

)
}

const $tabBar: ViewStyle = {
backgroundColor: "#355CA8",
borderTopColor: colors.transparent,

}
```