Estoy creando una aplicación Quiz usando React y estoy obteniendo las preguntas como una matriz y manteniendo los estados:

1. Matriz que contiene toda la información sobre todas las preguntas: declaración, opciones, respuesta elegida, estado (respondido, marcado para revisión, no visitado);
2. objeto con toda la información sobre la pregunta actual que se muestra
3. índice de la respuesta elegida actual (entre los 4 botones de radio)

Ahora, el problema es que cuando elijo una opción y hago clic en 'Guardar e ir a la siguiente pregunta', se activan los siguientes eventos:

1. Actualizar la información de la pregunta actual (nuevo estado y respuesta elegida)
2. La matriz de todas las preguntas se actualiza con la nueva información para la pregunta actual
3. Vaya a la siguiente pregunta (Actualice el estado n.° 2 (información de la pregunta actual) con la siguiente pregunta y establezca el n.° 3 en la respuesta elegida previamente para esa pregunta (si se eligió))

Ahora, el problema es que es muy importante que estos eventos se activen en secuencia; de lo contrario, cuando pasemos a la siguiente pregunta, incluso si la hemos respondido y volvemos a ella, el estado #3 no se actualiza correctamente.

En mi código, dado que estoy usando ganchos de reacción, la actualización de estado es asíncrona y no obtengo la secuencia correcta requerida. La siguiente función de pregunta se activa antes de que se actualice la matriz con la información sobre todas las preguntas. Leí muchas respuestas, pero todas sugerían usar Effect Hook. Pero el problema principal es que no tengo un caso de uso generalizado para setStates. Por ejemplo, no iré a la siguiente pregunta necesariamente después de que se actualice la matriz total y esta es una situación particular en la que necesito activar goToNextQuestion() después de que se actualice el estado #1. ¿Qué debo hacer para lograr mi objetivo requerido?