TOTP URI Error After getting scanned by Google Authenticator

 plugins: [
    username(),
    admin(),
    twoFactor({
      issuer: "example.com",
    }),
]

 plugins: [
    username(),
    admin(),
    twoFactor({
      issuer: "example.com",
    }),
]

import QRCode from "react-qr-code";

  const setupMFA = async (data: IPasswordSchema) => {
    toast.loading("Generating MFA QR code, please wait...", {
      id: "mfa-setup",
    });
    const res = await authClient.twoFactor.enable({
      password: data.password,
    });
    if (res.error) {
      toast.error(res.error.message, {
        id: "mfa-setup",
      });
      setMfaData(null);
      return;
    }

    setMfaData(res.data);

    toast.success("QR code generated successfully", {
      id: "mfa-setup",
    });
  };


<QRCode value={totpURI} className="w-full" />

import QRCode from "react-qr-code";

  const setupMFA = async (data: IPasswordSchema) => {
    toast.loading("Generating MFA QR code, please wait...", {
      id: "mfa-setup",
    });
    const res = await authClient.twoFactor.enable({
      password: data.password,
    });
    if (res.error) {
      toast.error(res.error.message, {
        id: "mfa-setup",
      });
      setMfaData(null);
      return;
    }

    setMfaData(res.data);

    toast.success("QR code generated successfully", {
      id: "mfa-setup",
    });
  };


<QRCode value={totpURI} className="w-full" />