Face Detection

Good Day,
Hoping someone can direct me. I've written this code in React to identify faces using the webcam from set images stored a the labels folder and also to identify emotions from the faces detected.

I need guidance on how i can rewrite the function in react (at the moment in JS) The faces cannot be identified, not sure where i am going wrong but it cannot match the faces from the labels folder to identify which face is which. I'm new to React. I

I also getting emotions from the face to working and it shows up but not he identification. Below is part of the code which needs to be rewritten in React which i'm not sure how to do:

useEffect(() => {
    startVideo();
    videoRef && loadModels();
    getLabeledFaceDescriptions();
  }, []);



  function getLabeledFaceDescriptions() {

    const labels = [
      "Bibinur",
      "Emunrich",
      "Mukthar",
      "Nursultan Ahmetsha",
      "Mahmud",
      "Kayrbek",
      "Saltanat",
      "Ablay",
      "Makkabhat",
      "Sandugash_8B",
      "Makhabbat_Zharimbetova",
      "Kamilya_Nuryshova",
    ];
    return Promise.all(
      labels.map(async (label) => {
        const descriptions = [];
        //const expression = [];
        for (let i = 1; i <= 2; i++) {
          const img = await faceapi.fetchImage(`/labels/${label}/${i}.png`);

          const labeledFaceDescriptors = await getLabeledFaceDescriptions();
          const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors);

          const detections = await faceapi
            .detectSingleFace(img)
            .withFaceLandmarks()
            .withFaceExpressions()
            .withFaceDescriptor();
          descriptions.push(detections.descriptor);

          console.log(detections.descriptor)


        }
        return new faceapi.LabeledFaceDescriptors(label, descriptions);

      })

    );

    }

  return (
    <div>
      <video crossOrigin="anonymous" ref={videoRef} autoPlay></video>
    </div>
  );
}

export default App;