Синтетическое событие становится устаревшим после асинхронной операции ⇐ Javascript

[Anonymous]

У меня возникла проблема с TextField, из-за которой e.target.value
устаревает после асинхронной операции (API FileReader) в обработчике onChange.
Когда я фиксирую e.target.value в переменной перед асинхронной операцией и
использую эту переменную для обновления состояния, все работает нормально. Однако если я попытаюсь получить
доступ к e.target.value после завершения асинхронной операции, оно всегда будет содержать
старое значение вместо текущего входного значения.
Почему e.target.value теряет свое текущее значение после асинхронной операции и
почему предварительное сохранение его в переменной решает проблему?
React версии 19.0.0

Код: Выделить всё

import React from 'react';
import TextField from '@mui/material/TextField';

export default function BasicCard() {

const [a, setA] = React.useState("place");

return  {
const value = e.target.value; // Storing in variable - WORKS
await new Promise((resolve) => { resolve(true) }); // FileReader API

console.log(2, e.target.value); // This logs the OLD value, not current

// setA(e.target.value); // This DOESN'T work - uses stale value
setA(value); // This WORKS - uses captured value
}}
/>
}

Ожидается: e.target.value должно содержать текущее входное значение даже после
асинхронной операции.
Фактическое: e.target.value возвращается к предыдущему значению после завершения асинхронной операции
, что приводит к сбою обновления состояния.
Обходной путь: захват e.target.value в константе перед асинхронная операция работает
правильно.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -operation