Camera instance flashing white before displaying camera feed

Question

I'm initiating an instance of <Camera> and when it's displayed it flashes a white screen before showing the camera feed.

import React, {useEffect, useState, useRef} from 'react';
import GlobalStyles from '../constants/styles.js';
import {
  Camera,
  useCameraDevice,
  useCameraDevices,
} from 'react-native-vision-camera';
import {Text, View, Image, Alert, Linking} from 'react-native';

export default () => {
  const [loading, setLoading] = useState(true);
  const [cameraPermission, setCameraPermission] = useState(false);
  const [cameraOrientation, setCameraOrientation] = useState('front');
  const camera = useRef(null);
  const device = useCameraDevice(cameraOrientation);

  // This is used to check the camera permission for the device
  const checkCameraPermission = async () => {
    console.info('Performing Permissions Check ...');
    const status = await Camera.getCameraPermissionStatus();
    switch (status) {
      case 'granted':
        setCameraPermission(true);
        setLoading(false);
        console.info('Permissions Checked');
        break;
      case 'not-determined':
        const newStatus = await Camera.requestCameraPermission();
        setCameraPermission(status === 'granted');
        if (status != 'granted') {
          Alert.alert(
            'Camera Permission Denied',
            'Camera access has not been granted to the application, please provide access to the camera',
            [
              {
                text: 'Open Permissions',
                onPress: () => Linking.openSettings(),
              },
            ],
          );
        } else {
          console.info('Permissions Checked');
        }
        setLoading(false);
        break;
      case 'denied':
        Alert.alert(
          'Camera Permission Denied',
          'Camera access has not been granted to the application, please provide access to the camera',
          [
            {
              text: 'Open Permissions',
              onPress: () => Linking.openSettings(),
            },
          ],
        );
        break;
      case 'restricted':
        Alert.alert(
          'Camera Permission Denied',
          'Camera access has not been granted to the application, please provide access to the camera',
          [
            {
              text: 'Open Permissions',
              onPress: () => Linking.openSettings(),
            },
          ],
        );
        break;
    }
  };

  useEffect(() => {
    checkCameraPermission();
  }, []);

  return (
    <View style={{flex: 1}}>
      {loading || !cameraPermission ? (
        <View style={{flex: 1}}>
          // Camera rendered to prevent error 
          <Camera
            ref={camera}
            style={{opacity: 0}}
            device={device}
            isActive={true}
            photo={true}
          />
          <View
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Image
              source={require('../resources/gif/loading.gif')}
              style={{
                width: 35,
                height: 35,
              }}
            />
          </View>
        </View>
      ) : (
        <View style={{flex: 1}}>
          <Camera
            ref={camera}
            style={{flex: 1}}
            device={device}
            isActive={true}
            photo={true}
          />
        </View>
      )}
    </View>
  );
};

I'm fairly new to react-native so I may be missing something obvious, however I can tell it isn't loading the first view instance as a loading GIF would appear if it would be.

I did ensure that the loading state wasn't being loaded first by adding the following code below the <Camera> component,

Note: I removed the gif from the (loading || !cameraPermission) state of the view when testing

<View
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
  }}>
  <Image
    source={require('../resources/gif/loading.gif')}
    style={{
      width: 35,
      height: 35,
    }}
  />
</View>

Is there someway to display a loading state until the camera feed is loaded ?