Uncaught TypeError: Cannot read properties of undefined (reading 'limit') at RecognitionService.recognize (recognition_service.js:47:1) at App.js:54:1

import './App.css';

import {usestate} from 'react';

import UploadAndDisplayImage from './app1'
import {useRef} from 'react';

import {CompreFace} from '@exadel/compreface-js-sdk';

function App() {
const videoTag = useRef('null');
const canvasElement1 = useRef('null');
const canvasElement2 = useRef('null');

const drawFace = (canvasE1,faceData) =>{
const customEvent= new Event('next_frame', {'bubbles':true , "cancelable":false});
document.dispatchEvent(customEvent)
let box=faceData.result[0].box;
canvasE1.clearRect(0, 0, 640, 480)
canvasE1.strokeStyle = "green";
canvasE1.linewidth = 10;
canvasE1.strokeRect( box.x_min, box.y_min, box.x_max = box.x_min, box.y_max = box.y_min);

// console.log(faceData)
}

const handleVideoStart= () =>{
navigator.mediaDevices.getUserMedia({video:true})
.then(res => videoTag.current.srcObject = res)
.catch(error =>console.error(error))

videoTag.current.addEventListener('play', ()=>{

let server='http://localhost';
let port='8000';
let key='0c2f2d4c-ffd5-4ee4-96e0-f79021fff89f';

let core = new CompreFace(server, port);
let recognitionService = core.initFaceRecognitionService(key)
;
let ctx1=canvasElement1.current.getContext('2d');
let ctx2=canvasElement2.current.getContext('2d');

document.addEventListener('next_frame', ()=>{

ctx1.drawImage(videoTag.current,0,0,640,480);
canvasElement1.current.toBlob( blob =>{
console.log(blob);
recognitionService.recognize(blob).then(res=>{
drawFace(ctx2,res);
console.log(res);
}).catch(error =>{
console.error(error)})
},'image/png',0.95);

})

const customEvent= new Event('next_frame', {'bubbles':true , "cancelable":false});
document.dispatchEvent(customEvent);

})

}

return (

export default App;