I am trying to generate QRcode with "qrcode".

I am able to do it, but in some unknown cases, it generates code that cannot be shown and present like it cannot be loaded.

For example, when I write "arad", it generates qr code, but when I add "1", it does not.

It also is not working if I enter numbers only, or just one letter.

I couldn't understand the exact cases which it's not working.

This is my client API to the backend:

import { Body, Controller, Get, Param, Put } from '@nestjs/common';
import { AppService } from './app.service';

let qr;

@Controller("/users")
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return qr;
  }

  @Put(":id")
  restaurantQRCdoe(@Param('id') id: string, @Body('img') qrCode: string) {
    qr = qrCode;
  }
}

and this is my client api to backend:

import axios from "axios";

const baseBackendURL = `http://localhost:5006/users/`;
export class UsersHttp{

    static async postNewRestaurantQRCode(qrCode: string) {
        axios({
            method: 'put',
            url: baseBackendURL + "arad11",
            data: {
                img: qrCode + "asf"
            }
        })
    }

    static async getQR(){
        return await axios({
            url: baseBackendURL,
            method: 'get',
        });
    }
}

This is my client component:

import { useCallback, useEffect, useState } from "react";
import {UsersHttp} from "../usersHttp/users";
import QRcode from "qrcode";

export function Restaurant () {
    const [username, setUserName] = useState("");
    const [src, setSrc] = useState("");
    const [qr, setqr] = useState();

    const qrGenerator = useCallback(() => {
        QRcode.toDataURL(`/${username}`).then((setSrc));
    },[username]);
    
    const sendToBackend = useCallback(async () => {
        await UsersHttp.postNewRestaurantQRCode(src.toString());
    },[src]);

    const getQRFromBackend = useCallback(async () => { 
         const res = (await UsersHttp.getQR()).data;
         setqr(res);
    },[]);

    useEffect(() => {
        console.log("arad", qr);
    },[qr]);

    return(
        <>
            <input
                placeholder="insert restaurant name"
                value={username}
                onChange={(text) => setUserName(text.target.value)}
            />
            <button type="submit" onClick={qrGenerator}>click here</button>
            <img src={qr}></img>
            <button type="submit" onClick={sendToBackend}>click</button>
            <button type="submit" onClick={getQRFromBackend}>click get qr code</button>
            

        </>
    )
}