Render <QRCode> in react.js and konva.js

Question

I want to render some qr code into a canvas made by konva.js.

When I put into the qr code did not render.
When I render the qr code outside the konva element, the qr code rendered.

I thought my placement of wrong but when I shift it up or down I still can't see my qr code.

My code in return():

<div>
<Fragment>
<button onClick={handleExport}>Click here to log stage data URL</button>

<div style={{ height: "500", margin: "0 auto", maxWidth: 150, width: "100%" }}>
  <QRCode
  size={500}
  style={{ height: "auto", maxWidth: "100%", width: "100%" }}
  value={value}
  viewBox={`0 0 256 256`}
  x={panjang/1.2}
  y={lebar/1.2}
  />
  </div>
<Stage 
width={panjang} 
height={lebar}
visible={true}
opacity={10}
ref={stageRef}
>

<Layer>

  <Rect
  width={panjang}
  height={lebar}
  //fill='white'
  stroke = 'black'
  strokeWidth = {5}
  />

  {/* <React.Fragment>
  <Image
  image={image1}
  width={panjang}
  height={lebar}
  />
  </React.Fragment> */}



  {placeholder12.map((placeholder1)=>{
    return(
      <Rect 
        x={placeholder1.x}
        y={placeholder1.y}
        width={placeholder1.width}
        height={placeholder1.height}
        stroke={placeholder1.stroke}
        strokeWidth={placeholder1.strokeWidth}
        draggable={placeholder1.draggable}
        id={placeholder1.id}
        fill='gray'
      />
    )
  })}

<div style={{ height: "100", margin: "0 auto", maxWidth: 150, width: "100%" }}>
  <QRCode
  size={256}
  style={{ height: "100", maxWidth: 200, width: 120 }}
  value={value}
  viewBox={`0 0 256 256`}
  x={panjang/1.2}
  y={lebar/1.2}
  />
  </div>

</Layer>

I hope that the qr code will be rendered into canvas from konva.js. I mention above that I tried to shift up and down in and .