How to fix missing video and black video playback in expo-camera recording - React Native

Question

after recording a 7-second video, I save it and then store it on my server.

however, when playing the video back it has no video, only audio.

video link: https://storage.googleapis.com/clipdrop-prod/tfZJe6V5ImfAYD_k9GMnKK6JD.mp4?avoidCache=1

here is the media info of said video

below is my code

once the component loads, it calls startRecording function. which starts the recording and waits for the recording to be "stopped" (aka saved), which it then loads the uri for the local file it has saved to on the device from videoData.

Code

import react, { useRef, useState, useEffect } from 'react';
import { Text, View, Image } from 'react-native';
import PrimaryButton from '../../../components/buttons/PrimaryButton';
import { windowWidth } from '../../../helpers/screenHelper';
import { Camera, CameraRecordingOptions, CameraType, requestCameraPermissionsAsync, requestMicrophonePermissionsAsync, VideoCodec } from 'expo-camera';
import CountDown from './CountDown';
import { CountDownStyles } from './CountDown.styles';

export default function RecordAnswerView(props:any){
    const { question, onComplete, onRestart } = props;
    const [showCountDown, setShowCountDown] = useState(true);
    const [countDownText, setCountDownText] = useState(3);
    const cameraRef = useRef<any>(null);
    const [showRedFlash, setShowRedFlash] = useState(false);
    const [permission, requestPermission] = Camera.useCameraPermissions();
    const [videoData, setVideoData] = useState(true);
    let answerCounterState:any = null;
    
    const saveRecording = () => { cameraRef.current.stopRecording();}
    const restartRecording = () => {onRestart();}
    const startRecording = async () =>{
        let videoData = await cameraRef.current.recordAsync({
            codec: VideoCodec.H264,
            quality: "720p",
            videoBitrate: 5*1000*1000
        });
        console.log(videoData);
        onComplete((videoData as any).uri);
    };

    const startCountDown = () => {
        setCountDownText(3);
        setShowCountDown(true);
        setTimeout(()=>{
            setCountDownText(3);
            setTimeout(()=>{
                setCountDownText(2);
                setTimeout(()=>{
                    setCountDownText(1);
                    setTimeout(async ()=>{
                        setShowCountDown(false);
                        setCountDownText(3);
                        await startRecording();
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }

    useEffect(()=>{
        async function init(){
            let audio = await requestMicrophonePermissionsAsync();
            let camera = await requestCameraPermissionsAsync();
            setShowRedFlash(false);
            startCountDown();
        }
        init();
    }, []);

    return <>
        <View style={{marginHorizontal:12}}>
            <Text style={{textAlign:'center', fontSize:22, marginVertical:12}}>Answer Recorder</Text>
            <Camera ref={cameraRef} type={CameraType.front} style={{width: windowWidth - 20, height: (windowWidth - 20) * 1.02}}>
            <View style={{width:"100%", height:"100%", alignItems:'center', justifyContent:'center'}}>
            <Text style={{display: showCountDown ? 'flex' : 'none', fontSize:32, backgroundColor:'#4A86E8', color:"#FFFFFF" ,paddingVertical: 2, paddingHorizontal: 14, borderRadius: 16}}>{ countDownText }</Text>
            </View>
            </Camera>
            <View style={{alignItems:'center', justifyContent:'center', flexDirection:'row', alignContent:'center',  marginTop: 5}}>
                <Text style={{borderTopLeftRadius: 8, borderBottomLeftRadius: 8, textAlign:'center', color:'#E9E9E9',backgroundColor:'#333333', width: windowWidth / 2, padding: 8, fontSize:13, marginLeft: 4, paddingVertical:9}}>Recommended Answer Time</Text>
                { (!showCountDown) ? <CountDown totalTime={question.recommend_answer_duration} onZero={()=>{
                    saveRecording();
                    setShowRedFlash(false);
                    setShowCountDown(false);
                }}
                onFlip={()=>{
                    setShowRedFlash(!showRedFlash);
                }}/> : <Text style={ CountDownStyles.textStyle }>{question.recommend_answer_duration} Seconds Remaining</Text> }
            </View>
            { !showCountDown && <><PrimaryButton onPress={()=>{saveRecording();}} text={"Save"} containerStyle={{ marginTop: 20, marginBottom: 8, width: windowWidth - 20}} fontSize={20}/>        
                <PrimaryButton onPress={()=>{restartRecording();}} text={"Restart Recording"} containerStyle={{marginTop: 5, marginBottom: 10, width: windowWidth - 20}} fontSize={10} height={32}/>
             </>}
        </View>
        <View style={{display: showRedFlash ? "flex" : "none", position:'absolute', top:0, bottom: 0, left: 0, right: 0, backgroundColor: '#ff000036'}} pointerEvents={"none"}>
        </View>
    </>
}

Testing

Test on a physical android device with the last Android OS