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

Question

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;