ReactJS: Cómo obtener el valor de entrada de la caja de diálogo y actualizarlo en la base de datos

Estoy construyendo una aplicación MERN, quiero permitir que el usuario edite el nombre de la comida en el cuadro de diálogo de solicitud haciendo clic en el botón “Editar”.

Seguí las instrucciones en este enlace: [https://stackoverflow.com/questions/54993218/reactjs-using-alert-to-take-input-from-user]

El problema es que cuando hago clic en el botón “Editar” y escribo en el cuadro de diálogo y luego hago clic en “Aceptar”, recibo el valor “null” por primera vez, pero no se actualiza la base de datos.

Y luego, cuando vuelvo a hacer clic en el botón “Editar” sin ingresar nada y luego presiono “Aceptar”, recibo el valor de la primera entrada y lo actualizo en la base de datos (como un retraso).

Lo que quiero es que cuando haga clic en el botón “Editar”, se muestre el cuadro de diálogo de solicitud y tome el valor del cuadro de diálogo y lo actualice en la base de datos cuando el usuario haga clic en “Aceptar”.

¿Hay alguna manera de solucionar esto? ¡Gracias a todos!

Aquí está mi demo: gif aquí

Aquí está mi código:

function FoodListTable(props) {
    /* Definición de handleClick en el componente */
    const [newFoodName, setNewFoodName] = useState("")

    const handleEdit = () => {
        const enteredFood = prompt('Por favor ingrese su nueva comida:')

        setNewFoodName(enteredFood)

        console.log(newFoodName)

        if (newFoodName) {
            Axios.put("https://mern-lefood.herokuapp.com/update", {
                newFoodName: newFoodName,
                id: props.val._id
            })
        }
    }

    return (
        <button onclick="{handleEdit}">Editar</button>
    )
}