"RNSScreenStackHeaderConfig" was not found in the UIManager Wont go away

Question

I'm on Mac OS 12 and trying to build an IOS app, but for some reason the error: Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. doesn't seem to go away needless of what I do. Here is the Metro Output whenever I reload Metro:

And here is my code:

import React, { useState } from 'react';
import { Text, View, Image, StyleSheet, StatusBar, ScrollView } from 'react-native';

import fetch from 'node-fetch';

import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Main from './pages/main';

const Stack = createNativeStackNavigator();

const YourApp = () => {

    return (
        <NavigationContainer>
        
            <Stack.Navigator>
                <Stack.Screen name="Main" component={Main} />
            </Stack.Navigator>

        </NavigationContainer>
    );
}

export default YourApp;

I have been trying to solve this for the past 2 days, thanks for the help!