QR shaded region not coming in Html5QrcodeScanner - reactjs

Question

I'm trying to build the barcode scanner using the html5-qrcode npm package in react js, everything working fine except QR shaded region. I added the qrbox in the configuration but not getting the QR shaded region. The qrbox width and height are not taken. I tried multiple ways not getting the desired result. Thanks in advance.
Here is my component:
import { Html5QrcodeScanner, Html5Qrcode } from "html5-qrcode";
import React from 'react';
const qrcodeRegionId = "html5qr-code-full-region";
class Html5QrcodePlugin extends React.Component {
render() {
return <div id={qrcodeRegionId} />;
}
componentWillUnmount() {
this.html5QrcodeScanner.clear().catch(error => {
console.error("Failed to clear html5QrcodeScanner. ", error);
});
}
componentDidMount() {
function createConfig(props) {
var config = {};
if (props.fps) {
config.fps = props.fps;
}
config.qrbox = { width: 250, height: 250 };
if (props.aspectRatio) {
config.aspectRatio = props.aspectRatio;
}
if (props.disableFlip !== undefined) {
config.disableFlip = props.disableFlip;
}
return config;
}
var config = createConfig(this.props);
var verbose = this.props.verbose === true;
if (!(this.props.qrCodeSuccessCallback )) {
throw "qrCodeSuccessCallback is required callback.";
}
this.html5QrcodeScanner = new Html5QrcodeScanner(
qrcodeRegionId, { facingMode: { exact: "environment"} }, config, verbose);
this.html5QrcodeScanner.render(
this.props.qrCodeSuccessCallback,
this.props.qrCodeErrorCallback);
}
};
export default Html5QrcodePlugin;