Modal jumping on closing with async onClick

*Expected behavior*Normal Modal Closing.

*Actual behavior*When clicking the button (snippet down below), then it starts closing and performs two css opacity transitions wrong. It looks like it's jumping. This can be seen in the screenshots of the analysis in between 0.8 sec and 1.1 sec (Link down below).

The problem only occurs if the toggleModal() function is after the await trigger() function, but I have to do it like this, because I want to check the inputs before closing the modal.I'm using react-hook-form for form validation.

You also can replicate the issue with setTimeout function. If the timeout is below 200ms, the modal does not close smoothly.

Do you have an idea how to solve the problem? A workaround would be to put toggleModal() in a setTimeout() function with 200ms, but I think this cannot be the answer.

Resources (screenshots, code snippets etc.)https://share.firefox.dev/3LPxT3N

<MDBBtn tabIndex={7} onClick={async () => {
        const result = await trigger([
            `${name}.strasse`,
            `${name}.postleitzahl`,
            `${name}.ort`,
            `${name}.land`
        ]);

        if (result){
            toggleModal();
        }
}}>{label} übernehmen</MDBBtn>