Правильно реагировать на обновление состояния с помощью события клавиатуры ⇐ Javascript

[Anonymous]

У меня есть интересный сценарий: у меня есть компонент реагирования, который поддерживает значение состояния, и я хочу объединить с ним следующий символ при нажатии клавиши или элемента HTML.
Проблема: При нажатии элемента HTML значение объединяется нормально, однако при нажатии клавиши значение переопределяется.
Я проверил значение с помощью useEffect, и оно обновляется но при нажатии другой клавиши значение становится пустым.
import { useCallback, useEffect, useState } from "react";

export function ValueTest() {
const [value, setValue] = useState("");

const keypress = (v: string) => {
setValue(value + v);
};

const keyUpHandler = useCallback((event) => {
event.preventDefault();
keypress(event.key);
}, []);

useEffect(() => {
document.addEventListener("keyup", keyUpHandler);

return () => {
document.removeEventListener("keyup", keyUpHandler, false);
};
}, [keyUpHandler]);

useEffect(() => {
console.log(value);
}, [value]);

return (

keypress("1")}
>
1

{value}

);
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... oard-event