splash screen not working in web

I am using the code from https://docs.expo.io/versions/latest/sdk/splash-screen/ to test the splash screen. The splash screen is not showing, instead a white page is showing. The full code

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';

export default class App extends React.Component {
  state = {
    appIsReady: false,
  };

  async componentDidMount() {
    // Prevent native splash screen from autohiding
    try {
      console.log(await SplashScreen.preventAutoHideAsync());
    } catch (e) {
      console.warn(e);
    }
    console.log('start waiting');
    await Sleep(5000);
    console.log('end waiting');
    this.setState({ appIsReady: true }, async () => {
      await SplashScreen.hideAsync();
    });
  }

  render() {
    if (!this.state.appIsReady) {
      return null;
    }

    return (
      <View style={styles.container}>
        <Text style={styles.text}>SplashScreen Demo! 👋</Text>
      </View>
    );
  }
}
function Sleep(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#aabbcc',
  },
  text: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Project details:

$ expo diagnostics

  Expo CLI 3.28.2 environment info:
    System:
      OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
      Shell: 5.0.17 - /bin/bash
    Binaries:
      Node: 10.19.0 - /usr/bin/node
      npm: 6.14.4 - /usr/bin/npm
    npmPackages:
      expo: ~39.0.2 => 39.0.3 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz => 0.63.2 
      react-native-web: ~0.13.12 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 3.28.2
    Expo Workflow: managed

The html created before appIsReady === true:

<html lang="en"><head><style id="react-native-stylesheet"></style>
    <meta charset="utf-8">
    <meta httpequiv="X-UA-Compatible" content="IE=edge">
    <!-- 
      This viewport works for phones with notches.
      It's optimized for gestures by disabling global zoom.
     -->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.00001, viewport-fit=cover">
    <title>TestSplashScreen</title>
    <style>
      /**
       * Extend the react-native-web reset:
       * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/initialRules.js
       */
      html,
      body,
      #root {
        width: 100%;
        /* To smooth any scrolling behavior */
        -webkit-overflow-scrolling: touch;
        margin: 0px;
        padding: 0px;
        /* Allows content to fill the viewport and go beyond the bottom */
        min-height: 100%;
      }
      #root {
        flex-shrink: 0;
        flex-basis: auto;
        flex-grow: 1;
        display: flex;
        flex: 1;
      }

      html {
        scroll-behavior: smooth;
        /* Prevent text size change on orientation change https://gist.github.com/tfausak/2222823#file-ios-8-web-app-html-L138 */
        -webkit-text-size-adjust: 100%;
        height: 100%;
      }

      body {
        display: flex;
        /* Allows you to scroll below the viewport; default value is visible */
        overflow-y: auto;
        overscroll-behavior-y: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -ms-overflow-style: scrollbar;
      }
      /* Enable for apps that support dark-theme */
      /*@media (prefers-color-scheme: dark) {
        body {
          background-color: black;
        }
      }*/
    </style>
  <link rel="manifest" href="/manifest.json"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"><link rel="shortcut icon" href="/favicon.ico"><script>try {
                        Object.defineProperty(screen, "availTop", { value: 0 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(screen, "availLeft", { value: 0 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(screen, "availWidth", { value: 1280 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(screen, "availHeight", { value: 800 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(screen, "colorDepth", { value: 24 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(screen, "pixelDepth", { value: 24 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(navigator, "hardwareConcurrency", { value: 8 });
                    } catch (e) {}
                    try {
                        Object.defineProperty(navigator, "appVersion", { value: "5.0 (X11)" });
                    } catch (e) {}
                    try {
                        Object.defineProperty(navigator, "doNotTrack", { value: "unspecified" });
                    } catch (e) {}
                    
            try {
                window.screenY = 0
            } catch (e) { }
        
            try {
                window.screenTop = 0
            } catch (e) { }
        
            try {
                window.top.window.outerHeight = 736
            } catch (e) { }
        
            try {
                window.screenX = 0
            } catch (e) { }
        
            try {
                window.screenLeft = 0
            } catch (e) { }
        
            try {
                window.top.window.outerWidth = window.screen.width
            } catch (e) { }
        </script></head>

  <body>
    <!-- 
      A generic no script element with a reload button and a message.
      Feel free to customize this however you'd like.
    -->
    <noscript>
      <form
        action=""
        style="
          background-color: #fff;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 9999;
        "
      >
        <div
          style="
            font-size: 18px;
            font-family: Helvetica, sans-serif;
            line-height: 24px;
            margin: 10%;
            width: 80%;
          "
        >
          <p>Oh no! It looks like JavaScript is not enabled in your browser.</p>
          <p style="margin: 20px 0;">
            <button
              type="submit"
              style="
                background-color: #4630eb;
                border-radius: 100px;
                border: none;
                box-shadow: none;
                color: #fff;
                cursor: pointer;
                font-weight: bold;
                line-height: 20px;
                padding: 6px 16px;
              "
            >
              Reload
            </button>
          </p>
        </div>
      </form>
    </noscript>
    <!-- The root element for your Expo app. -->
    <div id="root">
        <div class="css-view-1dbjc4n r-flex-13awgt0 r-pointerEvents-12vffkv">
            <div class="css-view-1dbjc4n r-flex-13awgt0 r-pointerEvents-12vffkv">
            </div>
        </div>
    </div>
  <script src="/static/js/bundle.js"></script>

</body></html>

Here you can see that no image is being displayed in the body.

The splash screen is working on Android. But not in web.