How can I set the back camera by default using html5-qrcode?

Question

I am having a problem with my current setup. When using a mobile phone, I see a dropdown selection for camera options (front or back). I need to set the back camera as the default and hide the option for selecting the camera.

Here's my code:

type ConfigType = {
    fps: number
    qrbox: number
    disableFlip: boolean
    aspectRatio?: number | 1
    verbose?: boolean | false
    facingMode?: { exact: string }
    videoConstraints?: {}
    qrCodeSuccessCallback: () => void
    qrCodeErrorCallback: () => void
}

const qrcodeRegionId = "html5qr-code-full-region"

const createConfig = (props: Partial<ConfigType>): ConfigType => {
        
    let config:ConfigType = {
        fps: 30,
        facingMode: { exact: 'environment' },
        qrbox: 200,
        disableFlip: false,
        aspectRatio: 1,
        qrCodeSuccessCallback: () => {},
        qrCodeErrorCallback: () => {},
        ...props
    }

    if(props.fps) {
        config.fps = props.fps
    }

    if(props.qrbox) {
        config.qrbox = props.qrbox
    }

    if(props.aspectRatio) {
        config.aspectRatio = props.aspectRatio
    }

    if(props.disableFlip !== undefined) {
        config.disableFlip = props.disableFlip
    }

    return config
}

...

useEffect(() => {

    // when component mounts
    const config = createConfig(props)
    const verbose = props.verbose === true

    //success callback required
    if(!(props.qrCodeSuccessCallback)) {
        throw "qrCodeSucessCallback is required callback."
    }

    const html5QRCodeScanner = new Html5QrcodeScanner(qrcodeRegionId, config, verbose)
    html5QRCodeScanner.render(props.qrCodeSuccessCallback, props.qrCodeErrorCallback)


    setTimeout(() => {
        // Add click event listener to the element with id "html5-qrcode-anchor-scan-type-change"
        const scanTypeChangeAnchor = document.getElementById('html5-qrcode-anchor-scan-type-change');
        if (scanTypeChangeAnchor) {
            scanTypeChangeAnchor.addEventListener('click', () => {
                console.log('Scan type change anchor clicked');
                updateScanCodeBtn();
            });
        }
    }, 1000);

    // clean up function when component will unmound
    return () => {
        html5QRCodeScanner.clear().catch(error => {
            console.error('Failed to clear html5QrCodeScanner.')
        })
    }

}, [])

As you can see I set the facingMode to be the back camera by default. I attached the generated output on the actual mobile.

I am using this library - https://www.npmjs.com/package/html5-qrcode By the way I am using nextjs