Not Able to access external webcam in react-use-face-detection

Question

I am trying to implement a face detection app using react-use-face-detection. It's working very well in my friend's laptop who has an inbuilt camera but since my inbuilt camera is damaged and i have an external camera. It is not working for me. It is showing no camera detected only everytime i try to run it even when my primary camera is set to the external camera. This is the related code snippet for the same:

// WebCamRecognition.js
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Webcam from 'react-webcam';
import { useFaceDetection } from 'react-use-face-detection';
import FaceDetection from '@mediapipe/face_detection';
import { Camera } from '@mediapipe/camera_utils';
import './WebCamRecognition.css'; 

const width = 500;
const height = 500;

const WebCamRecognition = ({ onVerify }) => {
  const navigate = useNavigate();
  const [showButton, setShowButton] = useState(false);
  const {
    webcamRef,
    boundingBox,
    detected,
    facesDetected,
  } = useFaceDetection({
    faceDetectionOptions: {
      model: 'short',
      minDetectionConfidence: 0.9
    },
    faceDetection: new FaceDetection.FaceDetection({
      locateFile: (file) =>
        `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`,
    }),
    camera: ({ mediaSrc, onFrame }) =>
      new Camera(mediaSrc, {
        onFrame,
        width,
        height,
      }),
  });

  useEffect(() => {
    if (detected && facesDetected === 1) {
      setShowButton(true);
      onVerify(); 
    } else {
      setShowButton(false);
    }
  }, [detected, facesDetected, onVerify]);

  const handleButtonClick = () => {
    navigate('/homepage');
  };

  return (
    <div className="webcam-container">
      <div className="webcam-video">
      {boundingBox.map((box, index) => (
          <div
            key={index}
            style={{
              border: '4px solid red',
              position: 'absolute',
              top: `${box.yCenter * 100}%`,
              left: `${box.xCenter * 100}%`,
              width: `${box.width * 100}%`,
              height: `${box.height * 100}%`,
              zIndex: 1,
            }}
          />
        ))}
        <Webcam
          ref={webcamRef}
          forceScreenshotSourceSize
          className="webcam"
        />
      </div>
      {showButton && (
        <button className={`webcam-button ${showButton ? 'active' : ''}`} onClick={handleButtonClick}>
          Proceed to Homepage
        </button>
      )}
    </div>
  );
};

export default WebCamRecognition;

Can anyone help me with the same?