React - Camera sometimes not loading after user allows camera permission - code with all comments

Question

Edit: The code works fine if I remove the useeffect, but I want to know when the camera permissions are allowed or not

I have a react component where the user is first asked permissions to access camera, and if he allows then the camera is opened otherwise an error message is shown - Camera permission is not enabled. Please enable camera access using the following steps.

It is sometimes happening that even if he allows, the camera is not opening, please tell how can I resolve this. I have pasted the relevant part of the code below:

Edit : The error is domexception: could not start video source w

    const [cameraScreenRefHeight, setCameraScreenRefHeight] = useState(0) //This variable sets the height of the camera component
    const [loading, setLoading] = useState(true);  //This variable is set to till when the camera permission is being asked
    const [cameraHasPermission, setCameraHasPermission] = useState(null); //Whether the user has given camera permission or not
    const cameraScreenRef = useRef(null) //ref of camera

    const textRef = useRef(null). //there is a text above camera which says click a picture
    const [textRefHeight, setTextRefHeight] = useState(0) //height of the text component
    
//I am taking camera and text height because once the image is captured its height is cameraScreenRefHeight - textRefHeight
    useEffect(() => {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }). //asks for the camera permission
            .then(() => {
              setCameraHasPermission(true);   //if user gives permission, set it to true
              setCameraScreenRefHeight(cameraScreenRef.current.clientHeight) //set the height of the camera 
              setTextRefHeight(textRef.current.clientHeight)//set the height of the text part 
            })
            .catch((error) => {
              setCameraHasPermission(false);
            })
            .finally(() => {
            setLoading(false);
            });
        } else {
          setCameraHasPermission(false);
          setLoading(false);
        }
  }, []);

The camera part in the return of the component : //isImageNull is null when the image is not captured and has the image when the image is captured via camera

<Box ref ={cameraScreenRef}  >
            {  loading === false ? (cameraHasPermission === true ? (isImageNull() &&
                    <Column width="100%"
                        alignmentVertical="top"
                        overflowX={"hidden"}
                        overflowY={"hidden"}>
                    <Camera ref={camera}
                            facingMode={ENVIRONMENT}
                            aspectRatio={ASPECT_RATIO}
                            errorMessages={{
                                noCameraAccessible : '',
                            }}>
                    </Camera>
                    <Row spacing="medium"
                         spacingInset="small small small small"
                         alignmentHorizontal={"center"}>
                    </Row>
                    </Column>) : <Row spacing="small" spacingInset="small small small small"> <br/>
                    <div style={{textAlign: "left", marginTop: "0", height:"auto"}} >
                    <Text type="b200">
                      <FormattedMessage id = "camera_permissions_disabled_1"
                        defaultMessage="Camera permission is not enabled. Please enable camera access using the following steps:"></FormattedMessage>
                        <br/>
                    </Text>
                    </div></Row>): <div/>}
              {!isImageNull() &&
                  <Column width="100%"
                          alignmentVertical="top" >
                  <img src={image}
                       height={cameraScreenRefHeight-textRefHeight}
                       alt="Clicked Damaged Item" />
                  <Row spacing="medium"
                       spacingInset="small small small small"
                       alignmentHorizontal={"center"}>
                  </Row>
              </Column>}
          </Box>

Please tell how can I improve the code? And why sometimes the camera does not open even if someone allows camera permissions. Also, in android, 2 permissions are being asked, one for the app and another for chrome when the page is loaded, would that affect anything?

Kierkegaardian