Nextjs Only 1 Instance problem

[Jerbee Paragas]

I have this code, then I called it 2x somewhere

"use client"
import React, { useEffect, useRef } from "react";
import QRCodeStyling from "qr-code-styling";

import { cn } from "@/lib/utils";

type Props = {
    className?: string;
    value: string;
};

const qrCode = new QRCodeStyling({
    width: 260,
    height: 260,
    type: "svg",
    backgroundOptions : {
        color : "transparent"
    }, 
    dotsOptions: {
        color: "#4267b2",
        type: "rounded",
    },
});

const QRCode = ({ className, value }: Props) => {
    const ref = useRef<HTMLDivElement>(null);

    useEffect(()=>{
        if (!ref || !ref.current) return;
        qrCode.update({
            data: value
          });
    },[value])

    useEffect(() => {
        if (!ref || !ref.current) return;
        qrCode.append(ref.current);
    }, []);

    return (
        <div className={cn("rounded-xl overflow-clip", className)} ref={ref} />
    );
};

export default QRCode;

I called it 2x here

           <div> 
                <QRCode value={'yes'}/>
                <QRCode value={'a different one'}/>
            </div>

it only shows the last one

when I removed the last <QRCode value={'a different one'}/> this is the result

How can I prevent this from happening?

[Jerbee Paragas]

I also tried it on the sample code which is also happens thesame

[Vasyl Vezhdel]

I have the same issue. No solution found yet