Expo Material Bottom Tabs Navigator doesn't work -> showing default BottomNavigation from React-Native-Paper

Question

I've been trying to create a normal material bottom tabs navigator and it just doesnt want to work. I also tried another identical code I had and there it works like it should, but with this code the Material bottom Tabs Navigator shows the BottomNavigation from React-Native-Paper. Is there any help?Anything i have to change?

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AuthScreen from './screens/AuthScreen';
import HomeScreen from './screens/HomeScreen';
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { userAuthStateListener } from './redux/actions/auth';


const Stack = createNativeStackNavigator()

export default function Main() {

    const currenUserObject = useSelector(state => state.auth) // access data from redux from here

    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(userAuthStateListener());
    }, []);

    if (currenUserObject == null) {
        console.log("nothing in user obj")
    } else {
        console.log("this prints" + { currenUserObject })
    }

    return (
        <NavigationContainer>
            <Stack.Navigator>
                {currenUserObject.currentUser == null ?
                    <Stack.Screen name='AuthScreen' component={AuthScreen} options={{ headerShown: false }} />
                    :
                    <>
                        <Stack.Screen name='hb' component={HomeScreen} options={{ headerShown: false }} />
                    </>
                }
            </Stack.Navigator>
        </NavigationContainer>
    )
}

And the HomeScreen should have the material bottom tabs navigator.

import { View, Text, StyleSheet, SafeAreaView } from 'react-native'
import React from 'react'
import { Feather } from '@expo/vector-icons'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

const Test = () => {
  return (
    <View style={{backgroundColor:"blue"}}>
      <Text>Test</Text>
    </View>
  )
}
//options={{ tabBarIcon: ({ color }) => (<Feather name="home" size={24} color={color} />)}} 
//barStyle={{ backgroundColor: "black" }}
export default function HomeScreen() {
  return (
    <Tab.Navigator barStyle={{ backgroundColor: 'black' }} activeColor="white" shifting={true}>
      <Tab.Screen name="Home" component={Test}  />
      <Tab.Screen name="Search" component={Test} options={{ tabBarColor:"white",tabBarBadge:false, tabBarIcon: ({ color }) => (<Feather name="search" size={24} color={color} />) }} />
      <Tab.Screen name="Post" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="plus-square" size={24} color={color} />) }} />
      <Tab.Screen name="Chat" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="message-square" size={24} color={color} />) }} />
      <Tab.Screen name="Me" component={Test} options={{ tabBarIcon: ({ color }) => (<Feather name="user" size={24} color={color} />) }} />
    </Tab.Navigator>
  )
}

But it doesnt show the right material-bottom-tabs-navigator. It shows this: Image of wrong navigator

Show right material-bottom-tabs-navigator but it actually shows the bottomnavigation from react-native-paper