QR scan with meteor + cordova


I am having a real trouble with implementing QR code scanning. I tried to use cordova-plugin-qrscanner (here). It does scan the qr codes reliably, but I cannot figure out, how can I constrain the preview.

Currently it works as follows:
Upon clicking “Try camera show”, the QRscanner show command is fired. My goal is to get it inside div that says “Camera preview should go here”:

But Instead the preview takes over the whole body, like so:

Code for component:

export default () => {

  useEffect(() => {
    if (Meteor.isCordova) {
  }, [])

  return (
      <div className="upper-center camera-preview">Camera preview should go here</div>
      <div className="bottom">
        <button onClick={() => Meteor.isCordova && QRScanner.show()} >Try camera show</button>
        <button onClick={() => Meteor.isCordova && QRScanner.hide()} >Try camera hide</button>
        <button onClick={() => Meteor.isCordova && QRScanner.destroy()} >Try camera destroy</button>

Any ideas, how could I find a solution to my problem? May be different QR scanner Cordova package or some ideas, how could I get this one to work?

For all the answers, thanks in advance! Cheers!

Have you read video-preview-dom-element? It says that it always renders in <body>

Instead, this plugin appends the video element as the final child of the body element, and applies styling to cover the entire background.