How i can download a component or div on PDF with react JS?

Question

I wanna download in PDF all my code inside my div in PDF . I tried a few possibilities but i always have a problem to do it .

This is what i need to download :

 <div id="qrCodePdf" ref={ref}>
          <Row className="backgroundTicket">
            <Col>
              <Row className="rowCode">
                <Col>
                  <p className="titleName">
                    {localStorage.getItem("propsRestaurant")}
                  </p>
                </Col>
                <Col>
                  <div id="qrCodeDiv2" />
                </Col>
                <Col>
                  <img
                    src="/image/tipourboirePhrase.png"
                    className="tipPicture"
                  />
                </Col>
              </Row>
            </Col>
            <Col>
              <Row className="rowCode2">
                <Col className="col2">
                  {" "}
                  <img src="/image/logoCode.png" className="tipPicture" />
                </Col>
                <Col className="col2">
                  <p>Juste pour un merci</p>
                </Col>
              </Row>
            </Col>
          </Row>
</div>

For the moment i used js pdf and HTML2Canvas but i always have error like × TypeError: Cannot read properties of null (reading 'toDataURL')

also my button

 <button
        className="buttonQrCode"
        onClick={() => {
          const canvas = document.querySelector("qrCodePdf canvas");
          const image = canvas.toDataURL();
          const element = document.createElement("a");
          element.setAttribute("href", image);
          element.setAttribute("download", "canvas.pdf");
          document.body.appendChild(element);
          element.click();
        }}>
        Télécharger le QR Code Ticket
      </button>