how to navigate to a screen before the stack navigator is created?

I am new to react and essentially I am using Expo to create an app. I chose the TypeScript setup with the tabs and navigator already implemented when I ran "expo init newApp". I just have a transition screen I want to display for a few seconds before navigating to the root of the app, which is just the component already given to me by Expo (from the template, it contains tabonescreen.tsx and tabtwoscreen.tsx).

However, I am not sure how to create a new stack navigator, and I believe it is overkill for this situation.

What should I do? How should I navigate to the root after I display my transition:

App.tsx

import React, { useState } from 'react';import useCachedResources from './hooks/useCachedResources';import TransitionScreen from './screens/TransitionScreen';// A root stack navigator is often used for displaying modals on top of all other content// Read more here: https://reactnavigation.org/docs/modalexport default function App() {  const isLoadingComplete = useCachedResources();  if (!isLoadingComplete) {    return null;  } else {    return (<TransitionScreen/>    );  }}

TransitionScreen.tsx

import React from 'react';import {StyleSheet, View, Image } from 'react-native';export default function TransitionScreen() {    return(<View style={styles.container}><Image          style={styles.calpalLogo}          source={require('../assets/images/calpal.png')}        />          {            setTimeout(() => {                //GO TO tabonescreen.tsx/root of the app            }, 5000)        }</View>    )  }  const styles = StyleSheet.create({    container: {      flex: 1,      backgroundColor: '#FAFAFA',      alignItems: 'center',      justifyContent: 'center',    },    calpalLogo: {      width:'100%',      height:'60%',    }  });