React-Native - How to convert JS to TS using functional component declaration (FC)?

Question

I've to implement Pendo's React Native implementation in TypeScript. My App.tsx has following code that has to modified to accommodate Pendo's methods in it:

Current App in TS:

export const App: FC = () => {
  const [isInitialized, setInitialized] = useState<boolean>(false);

  useEffect(() => {
    const init = async () => {
        ... some code ...
    };
    init();
  }, []);

  return (
    <SafeAreaProvider>
      {isInitialized ? (
            <NavigationContainer
              theme={combinedTheme}
              linking={linking}
              onReady={SplashScreen.hide}
            >
              ... code ....
            </NavigationContainer>
      ) : null}
    </SafeAreaProvider>
  );
};

Pendo's Suggested Implementation in JS:

Pendo's implementation is in JavaScript, and I've not been able to find a custom type definition for the library. Here is the relevant segment in the documentation for initializing Pendo in React Native with React Navigation:

import {withPendoRN} from 'rn-pendo-sdk'
import {useRef} from 'react';

function RootNavigator(props) {
  const navigationRef = useRef();
  return (
    <NavigationContainer 
      ref={navigationRef}
      onStateChange={()=> {
        const state = navigationRef.current.getRootState()
        props.onStateChange(state);
      }} 
      onReady ={()=>{
        const state = navigationRef.current.getRootState()
        props.onStateChange(state);
      }}>
      {MainStackScreen()}
    </NavigationContainer>
  )
};

export default withPendoRN(RootNavigator);

My Modified App in TS:

How can I modify my existing code to integrate Pendo in it? This is what I've done so far to the App.tsx file:

export const App1 FC = () => {
  const [isInitialized, setInitialized] = useState<boolean>(false);

  useEffect(() => {
    
    const init = async () => {
       ... code ...
    };

    init();
  }, []);

  const navigationRef = useRef<any>();
  return (
    <SafeAreaProvider>
      {isInitialized ? (
            <NavigationContainer
              ref={navigationRef}
              theme={combinedTheme}
              linking={linking}
              onStateChange={()=> {
                const state = navigationRef.current.getRootState()
                prop.onStateChange(state);
                console.log(Children);
              }} 
              onReady ={()=>{
                const state = navigationRef.current.getRootState()
                props.onStateChange(state);
                SplashScreen.hide;
              }}
            >
               ... code ...
            </NavigationContainer>
      ) : null}
    </SafeAreaProvider>
  );
};

export const App = withPendoRN(App1,null);

My main questions are:

1. Does my App() provides equivalent implementation to function RootNavigator(props) from Pendo's instructions?
2. Is my implementation for onStateChange() and onReady()inline with Pendo's instructions?
3. Is there a Pendo's React Native implementation available in TypeScript that I can review?

When I run the application in emulator, it doesn't crash or log any errors, however, Pendo's startup messages to confirm its valid install is missing from my logs.