Problem with RefreshControl on WebView in React Native (expo) app

Question

I'm hoping someone here would be kind enough to assist. I've implemented refresh control on a webview in my React Native (Expo) app. It's working, however, the page background colour goes white and a small blue spinner appears before my grey Activity Indicator spinner.

Animited gif showing the app loading as well as the webview refresh

When I refresh the web view, I would like the page background colour to be dark grey (#303030) with my light grey activity indicator as I have it when my app loads after the splashscreen disappears. I have no idea where that blue spinner comes from as well as the white page. Please refer to the animated gif that shows the app loading as well as the refresh control function. Here is my app.js code below:

import React, { useState, useEffect, useRef } from 'react'; 
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, TouchableOpacity, FlatList, ActivityIndicator, RefreshControl, SafeAreaView, ScrollView, BackHandler, Alert, Dimensions, Component, Platform } from 'react-native'; 
import { WebView } from 'react-native-webview'; 
import OneSignal from 'react-native-onesignal';
import Constants from 'expo-constants'; 
import NetInfo, { useNetInfo } from '@react-native-community/netinfo';
import NoConnection from './NoConnection';

const initOneSignal = () => {
  OneSignal.setAppId("b74864a8-71ee-4fd0-aff1-fb755c60c3b6");
  OneSignal.setLogLevel(6, 0);
  OneSignal.promptForPushNotificationsWithUserResponse(response => {
    console.log(response);
  });
}

const ActivityIndicatorElement = () => { 
  return ( 
    <View style={styles.activityIndicatorStyle}> 
      <ActivityIndicator color='#595959' size='large' /> 
    </View> 
  ); 
}; 

function wait(timeout) {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
}

export default function App() {
  initOneSignal();
  const [refreshing, setRefreshing] = useState(false);
  const [refresherEnabled, setEnableRefresher] = useState(true);
  const [url, setUrl] = useState('https://focusontransport.co.za/');
  const [visible, setVisible] = useState(false); 
  const [screenName, setScreenName] = useState('Home'); 
  const info=useNetInfo()

    //Code to get scroll position
    const handleScroll = (event) =>  {
      console.log(Number(event.nativeEvent.contentOffset.y))
      const yOffset = Number(event.nativeEvent.contentOffset.y)
      if (yOffset === 0){
        console.log('top of the page')
        setEnableRefresher(true)
      }else{
        setEnableRefresher(false)
      }
    }
      
    return (
      info.isConnected==true? (
      <View style={{flex: 1}}>
      <ScrollView
          style = {styles.ScrollStyle}
          contentContainerStyle={{flex: 1}}
          refreshControl={
            <RefreshControl 
            refreshing={refreshing}
            enabled={refresherEnabled}
            onRefresh={()=>{this.webview.reload()}}
            />
        }>
          <WebView
        style={styles.webview}
        ref={(ref) => { this.webview = ref; }}
              source={{ uri: url }} 
              javaScriptEnabled={true}
              domStorageEnabled={true}
              onLoadStart={() => setVisible(true)} 
              onLoad={() => setVisible(false)} 
              onScroll={handleScroll}            /> 
            {visible ? <ActivityIndicatorElement /> : null}
      </ScrollView>
  </View>):(
        <NoConnection/>
   )
   );
 }
 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#303030',
    alignItems: 'center',
    justifyContent: 'center',
  },
  ScrollStyle: {
   position: 'relative',
   backgroundColor: 'transparent',
   paddingTop: Constants.statusBarHeight 
  },
      // webview 
      webview: { 
        flex: 1, 
        alignItems: 'center', 
        justifyContent: 'center', 
        backgroundColor: '#303030'
      }, 
  activityIndicatorStyle: { 
    flex: 1, 
    position: 'absolute', 
    marginLeft: 'auto', 
    marginRight: 'auto', 
    marginTop: 'auto', 
    marginBottom: 'auto', 
    left: 0, 
    right: 0, 
    top: 0, 
    bottom: 0, 
    justifyContent: 'center', 
  }
});