I am a beginner at frontend and not even sure if this is the right place to ask this question but a developer has created a react app and when data is thrown into the input field via a bluetooth device(like barcode scanner), it lags too much sometimes.

https://drive.google.com/drive/folders/1LFqGhp1HyEMnyzO16W8KlG8_tJcXTrOr?usp=sharing

The videos will help in better understanding of the problem. and the following is the code:

<Form.Item name="rfId" label="">
  <Input
    key={`input-${selectedSerialKey}`}
    disabled={!selectedWarehouse || status !== statusValues.start}
    placeholder="Enter RFID"
    value={currentSerialText}
    onChange={handleRFIDChange}
  />
</Form.Item>;

Is there any option where I dont show the scanned data being filled in the input field and show it directly to the table. I am thinking this might save the time. or if someone can guide me what topic should I search to tackle this?

const handleRFIDChange = (e) => {
  setCurrentSerialText(e.target.value);
};

const onAddSerial = (e) => {
  if (selectedSerialKeyRef.current !== null && findSerial) {
    setClearText((prev) => prev + 1);
    setSerials(
      serials.map((item) => {
        if (item.$key === selectedSerialKeyRef.current && findSerial) {
          return {
            ...item,
            serial: currentSerialTextRef.current,
          };
        } else {
          return item;
        }
      })
    );
    setSelectedSerialKey(null);
  } else {
    setClearText((prev) => prev + 1);
    setSerials((prev) =>
      removeDuplicateItems(
        [
          ...prev,
          { serial: currentSerialTextRef.current, $key: Math.random() },
        ],
        "serial"
      )
    );
  }
  forceRerender();
  // setCurrentSerialText('');
};