Expo splash screen disappears before hideAsync()

Im developing my first React Native app with Expo and are having some troubles with the splash screen.

In my app.json I have set the following under expo:

{
  "expo": {
    "name": "my-iOS-Android-app",
    "slug": "my-iOS-Android-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "backgroundColor": "#C808F9"
    },
    "owner": "linus",
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "my.test.app"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
} 

I have followed the guide on Expo´s website and this is my code:

useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
        let data = await fetchData();
        await new Promise(resolve => setTimeout(resolve, 8000));
        setData(data);
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
    // initSorting();
  }, [])

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

As you can see I have added an 8 second timeout. The purple screen pops up while expo is downloading the code to my phone, then a blank screen is seen for 8 seconds. Im using an iOS device for the testing.

Can someone explain what Im doing wrong? Or have I misunderstood the purpose of expos´s splash screen?

Thanks!