I am building an Expo app using GluestackUI, and I've made sure to format my config file perfectly. Yet, when wrapping my page in the GluestackUIProvider, it keeps sending out this error:

Uncaught Error: You cannot use tokens without wrapping the component with StyledProvider. Please wrap the component with a StyledProvider and pass theme config.
    at AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148086:19
    at Array.map ()
    at resolveStringToken (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148063:38)
    at getTokenFromConfig (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148147:17)
    at getResolvedTokenValueFromConfig (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148183:30)
    at AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148204:24
    at Array.map ()
    at resolveTokensFromConfig (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148202:24)
    at resolvedTokenization (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:148211:22)
    at StyledValueToCSSObject (AppEntry.bundle?platform=web&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.routerRoot=app&unstable_transformProfile=hermes-stable:152592:44)

I've tried creating a provider with @gluestack-ui/provider but it still did not work.

Here's the code for my App.tsx:

import React, { useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { StatusBar } from "expo-status-bar";

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
import { UserProvider, useUserStore } from "./src/store/UserStore";

import TabNavigator from "./src/components/navigation/TabNavigator";
import AuthNavigator from "./src/components/navigation/AuthNavigator";

import { View, Text } from "@gluestack-ui/themed";

function LoadingScreen() {
  return (
    
      Loading...
    
  );
}


function RootNavigation() {
  const { user, loading } = useUserStore();

  if (loading) return ;
  return user ?  : ;
}


export default function App() {
  useEffect(() => {
    console.log("[App] Mounted");
  }, []);

  return (
    
      
        
          
        
        
      
    
  );
}