Error when trying to use Material Top Tabs

Question

I'm using react native for a project and I'm trying to use a component that react navigation offers, it's the top tabs, everytime I use this though a error comes up, mostly one that says

Invariant Violation: Tried to register two views with the same name RNCViewPager

I've looked up what could cause this and some people said that it was because of the react-native-pager-view package itself so I tried to switch it out but I still have no resolved it.

This is the tab component:

import { StyleSheet, Image, Text, View, TextInput, Pressable, Button, 
FlatList, ImageBackground } from "react-native";
import { Home } from "../Tabs/Explore";
import { createMaterialTopTabNavigator } from "@react- 
navigation/material-top-tabs";
import { Search } from "../Secondary/Search";
import { Tags } from "../Secondary/Tags";

const Tab = createMaterialTopTabNavigator();


export function TopTabs() {

return (
    <Tab.Navigator initialRouteName="HomeExplore">
        <Tab.Screen name="HomeExplore" component={Home} />
        <Tab.Screen name="Search" component={Search} />
        <Tab.Screen name="Tags" component={Tags} />
    </Tab.Navigator>
)
}

 const stylesl = StyleSheet.create({
  tab: {
    backgroundColor: "#000000"
  }
 })

Now this is where I wanted the tab component to go, but I get a error everytime.

import React, { useState, useEffect } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
  import User from '../../Post/User';
 import { StyleSheet, Image, Text, View, TextInput, Pressable, Button, 
  FlatList, ImageBackground, ScrollView } from "react-native";
 import Community from '../../Post/Community';
 import { QUOTE, POST, COMMUNITY, PAGE, VIDEO, CUSTOMER, PRODUCT, Search } 
  from '../../graphql/Mutation';
 import { TopTabs } from './Foreal';
 const Stack = createStackNavigator()




 export default function Explores({ navigation }) {


return (

    <Stack.Navigator initialRouteName="Base" screenOptions={{ headerStyle: { height: 55, backgroundColor: 'black', shadowColor: 'transparent' }, tabBarStyle: { backgroundColor: "black", borderTopWidth: 4 } }}>
        <Stack.Screen name="Base" component={TopTabs} options={{
        }} />
        <Stack.Screen name="singleUser" component={UserList} options={{ headerShown: false }} />

        
        <Stack.Screen name="MoreSearch" component={Searching} options={{ headerShown: false }} />


    </Stack.Navigator>
)

}

And here's my package.json:

 {
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@apollo/client": "3.4.16",
"@gorhom/bottom-sheet": "^4.1.1",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-navigation/bottom-tabs": "^6.0.5",
"@react-navigation/material-top-tabs": "^6.0.6",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.7",
"@stripe/stripe-react-native": "0.2.3",
"@types/react-native-scrollable-tab-view": "^0.10.2",
"apollo-link-context": "^1.0.20",
"date-fns": "^2.25.0",
"expo": "^44.0.0",
"expo-app-loading": "~1.3.0",
"expo-av": "~10.2.0",
"expo-file-system": "~13.1.2",
"expo-image-picker": "~12.0.1",
"expo-status-bar": "~1.2.0",
"formik": "^2.2.9",
"graphql": "^16.2.0",
"graphql-tag": "^2.12.5",
"ionicons": "^5.5.3",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-bottomsheet": "^2.5.2",
"react-native-elements": "^3.4.2",
"react-native-gesture-bottom-sheet": "^1.0.9",
"react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "^5.4.9",
"react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2",
"react-native-scrollable-tab-view": "^1.0.0",
"react-native-stripe-sdk": "^0.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "0.17.1",
"yup": "^0.32.11"
},
 "devDependencies": {
"@babel/core": "^7.12.9"
 },
 "private": true
 }