standard expo typescript template + SafeAreaProvider/SafeAreaView is rendering component twice?

I just started a new project with a standard expo typescript and wanted to use the SafeAreaProvider/SafeAreaView from react-native-safe-area-context. When I do this and enter a component to render with an image; it shows double (renders twice).

I tried a console log and swas that it was rerendered 3 times, How can I prevent this from happening?

*

App.tsx

import { StatusBar } from "expo-status-bar";import React from "react";import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";import useCachedResources from "./hooks/useCachedResources";import useColorScheme from "./hooks/useColorScheme";import Navigation from "./navigation";import HomeScreen from "./screens/HomeScreen/HomeScreen";export default function App() {  const isLoadingComplete = useCachedResources();  const colorScheme = useColorScheme();  if (!isLoadingComplete) {    return null;  } else {    return (<SafeAreaProvider><SafeAreaView style={{ flex: 1, backgroundColor: "black" }}><HomeScreen /><Navigation colorScheme={colorScheme} /><StatusBar /></SafeAreaView></SafeAreaProvider>    );  }}

HomeScreen.tsx

import * as React from "react";import { Image } from "react-native";import { Text, View } from "../../components/Themed";import styles from "./styles";const HomeScreen = () => {  return (<View style={styles.container}><Image        style={styles.image}        source={{          uri:"https://www.homewallmurals.co.uk/ekmps/shops/allwallpapers/images/captain-marvel-higher-further-faster-61x91-5cm-movie-posters-31607-1-p.jpg",        }}></Image></View>  );};export default HomeScreen;