I’m working on a React ERP of products and goods, here in a component I have a print button which I want to print product barcode, labels, name and other details with Zebra printer, I have made connection in my MacOS system with Zebra printer and its successfully connected and working fine.

How can I use qz tray api to print my labels in ReactJS Project, I’ve made a component SmallLabelPrint.jsx where I designed how the label should look while print, but how to print that JSX component. Here is the code of label component:-

export default function SmallLabelPrint({data}) {
  const labelHtml = `
    <label style="width: 200px; height: 100px; border: 1px solid black;">
      <p>${data.name}</p>
      <p>${data.desc}</p>
    </label>
  `;

  return <div dangerouslySetInnerHTML={{ __html: labelHtml }} />;
}

Now in the below Product component I have a button to print with the details of the product. And with the documentation of the QZ Tray I have added this code, the connection is fine but its not printing and throwing this error:-

//AddSRF.jsx

const printWithQZTray = async () => {
    try {
      // Connect to QZ Tray websocket
      await qz.websocket.connect();

      // Find the desired printer
      const printer = await qz.printers.find(printerName);
      const formatData = <SmallLabelPrint data={printData} />;
      const config = qz.configs.create(printerName, {
        size: { width: 4, height: 6 }, // Adjust size as needed
      });

      // Prepare the print data (replace with your content)
      const data = [
        "nNn", // New label command
        "q609n", // Label format selection
        {
            type: "raw",
            flavor: "file", // Assuming text format
            data: formatData, // Use the generated string as data
            options: { language: "EPL" }, // Adjust language as needed
        },
        "nP1,1n", // Print command
    ];

      // Send the print job
      await qz.print(config, data);

    } catch (error) {
      console.error("Error printing:", error);
      // Handle printing errors gracefully (e.g., display an error message to the user)
    }
  };

  const handlePrint = async () => {
    const formatData = <SmallLabelPrint data={printData} />;
    await printWithQZTray(formatData);
  };

//Jsx
<Button onClick={handlePrint}>Print</Button>

And with this getting this error:-

Maybe the code is wrong because I didn’t find anything where it is working with React project, kindly help with this, Thanks in advance.