React native Appearance color scheme returns undefined

I'm trying to change the theme of a react native app. The idea is when a user changes the system theme on their device its automatically detects the changes and updates the UI accordingly. The example below returns as undefined when using typescript but with normal JS it works as intended.

Links used as references supplied

https://callstack.github.io/react-native-paper/theming.html
https://reactnative.dev/docs/appearance
https://dev.to/magoacademico/dark-theme-com-react-navigation-typescript-react-native-paper-55ob

const Main: FC = () => {  let theme = Appearance.getColorScheme();  let colorTheme;  const toggleTheme = useCallback((appTheme: any) => {    colorTheme = theme === 'light' ? lightTheme : darkTheme;  }, []);  useEffect(() => {    Appearance.addChangeListener(({ colorScheme }) => {      toggleTheme(colorScheme);    });  }, [toggleTheme]);  console.log(colorTheme);  return (<NavigationContainer><PaperProvider theme={colorTheme}><App /></PaperProvider></NavigationContainer>  );};