Frame error Extraction While Uploading Video to Luma server

Question

I Have Made A Video Recording App using React-native-vision Camera and whenever i am trying to upload the video to server i am getting the frame error extraction

      import React, {useEffect, useRef, useState} from 'react';
      import {
      View,
      ActivityIndicator,
      StyleSheet,
      TouchableOpacity,
      Text,
   } from 'react-native';
    import {Camera, useCameraDevices} from 'react-native-vision-camera';
    import Video from 'react-native-video';
    import axios from 'axios';
    const Try1 = () => {
  const devices = useCameraDevices();
  const device = devices.back;
  const camera = useRef(null);
  const [videoData, setVideoData] = useState();
  const [isRecording, setIsRecording] = useState(false);
  const [activeCamera, setActiveCamera] = useState(false);

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

  const checkPermission = async () => {
    const newCameraPermission = await Camera.requestCameraPermission();
    console.log(newCameraPermission);
  };

  if (device == null) return <ActivityIndicator />;

  const startRecording = async () => {
    console.log('clicked');
    if (camera.current) {
      try {
        setIsRecording(true);
        setActiveCamera(true);
        const video = await camera.current.startRecording({
          onRecordingError: error => {
            console.error('Recording failed!', error);
            setIsRecording(false);
            setActiveCamera(false);
          },
          onRecordingFinished: async video => {
            console.log(`Recording successfully finished! ${video.path}`);
            console.log(video);
            setIsRecording(false);
            setActiveCamera(false);
            setVideoData(video.path);
          },
        });
        console.log('Done1');
      } catch (error) {
        console.error('Error starting recording:', error);
        setIsRecording(false);
        setActiveCamera(false);
      }
    } else {
      console.error('Camera is not available.');
    }
  };

  const stopRecording = async () => {
    try {
      if (camera.current) {
        const video = await camera.current.stopRecording();
        console.log(video);
        setIsRecording(false);
        setActiveCamera(false);
      }
    } catch (error) {
      console.error('Error stopping recording:', error);
      setIsRecording(false);
      setActiveCamera(false);
    }
  };

  const handleRecordAgain = () => {
    setVideoData(null);
  };

  const base_URL = 'https://webapp.engineeringlumalabs.com/';
  const API_KEY =
    'API key passing';
  const createCapture = async () => {
    await axios
      .post(
        base_URL + 'api/v2/capture',
        {title: 'xyz'},
        {
          headers: {
            Authorization: `luma-api-key=${API_KEY}`,
          },
        },
      )
      .then(async res => {
        console.log(res?.data);
        await uploadCapture(res?.data?.signedUrls.source);
        return res;
      })
      .then(async res => {
        await triggerCapture(res?.data?.capture?.slug);
      })

      .catch(err => {
        console.log(err);
      });
  };
  const uploadCapture = async src => {
    await axios
      .put(
        src,
         videoData,
        {
          maxBodyLength: Infinity,
          headers: {
            'Content-Type': 'video/mp4',
          },
        },
      )
      .then(res => {
        console.log('uploadCaptureFn : Source send');
      })
      .catch(err => {
        console.log('uploadCaptureFn : Source Not send', err);
      });
  };
  const triggerCapture = async slugID => {
    await axios
      .post(`${base_URL}api/v2/capture/${slugID}`, null, {
        headers: {
          Authorization: `luma-api-key=${API_KEY}`,
        },
      })
      .then(res => {
        console.log('Trigged', res.data);
      })
      .catch(err => {
        console.log('Not Trigged :', err);
      });
  };

  return (
    <View style={{flex: 1}}>
      {videoData ? (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Video
            source={{uri: videoData}}
            style={{width: '90%', height: 200}}
            controls={true}
          />
          <TouchableOpacity
            style={{
              width: '90%',
              height: 50,
              borderWidth: 1,
              alignSelf: 'center',
              borderRadius: 10,
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 20,
            }}
            onPress={handleRecordAgain}>
            <Text>Record Again</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              width: '90%',
              height: 50,
              borderWidth: 1,
              alignSelf: 'center',
              borderRadius: 10,
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: 20,
            }}
            onPress={createCapture}>
            <Text>Upload</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <View style={{flex: 1}}>
          <Camera
            ref={camera}
            style={StyleSheet.absoluteFill}
            device={device}
            isActive={true}
            video={true}
          />
          <TouchableOpacity
            style={{
              width: 60,
              height: 60,
              borderRadius: 30,
              backgroundColor: 'red',
              position: 'absolute',
              bottom: 50,
              alignSelf: 'center',
            }}
            onPress={() => (isRecording ? stopRecording() : startRecording())}>
            <Text>{isRecording ? 'Stop Recording' : 'Start Recording'}</Text>
          </TouchableOpacity>
        </View>
      )}
    </View>
  );
};

export default Try1;

when i run this code it work till the triggercapture when i paste the slug id in postman i get the frame extraction error in the postman due to which i am not able to convert the video to gltf