React render popup-parent перед открытием всплывающего окна

Question

У меня есть функциональный компонент ioni c react, который, когда элемент <div> в нем щелкает, открывает всплывающее окно. Я обновляю одно из состояний компонента (используя перехватчик useState) до открытия всплывающего окна (первый фрагмент кода ниже), но оно не обновляется, пока я не закрою открытое всплывающее окно. Я хочу, чтобы обновленное состояние использовалось в другой функции обратного вызова (вызываемой из открытого всплывающего окна, второй фрагмент кода ниже), но поскольку родительский компонент не отображается до закрытия всплывающего окна, я не могу использовать обновленные значения. Как я могу принудительно повторно отрисовать родительский компонент перед открытием всплывающего окна?

const popupSelecter = (e : React.MouseEvent<HTMLDivElement>) => 
{
    let id = e.currentTarget.getAttribute("data-key");
    setclickedId(id);
    setShowModal(true);
    console.log('clicked Id: ' + clickedId);
    console.log('prevOP: ' + prevOP);
}

Я устанавливаю здесь значение переменной состояния showModel в значение true, чтобы открылось всплывающее окно. Но перед этим я установил переменную состояния clickedId, которая не обновляется до закрытия всплывающего окна.

Во всплывающем окне я вызываю указанную ниже функцию, передавая функциональную опору (ниже также находится в родительском компоненте).

const popupPropHandler = (op: number | undefined, nextColor: string | undefined) => {
    setBoolVal(true);
    setNextColor(nextColor);
    setPrevOP(update(prevOP, {clickedId: {$set: op}}));
    console.log('clicked id at dispatch: ' + clickedId);
    console.log('op at dispatch: ' + op);
    console.log('prevOP at dispatch: ' + prevOP);
    dispatch({type: OUTPUT_UPDATED, payload: {
        output: op
    }})
}

Но идентификатор, по которому щелкнули, не обновляется (выводится undefined) в вышеуказанной функции. Я хочу, чтобы у него было обновленное значение. Как я могу этого добиться?