I'm using mobx stores in my react app for state management, I want to show an error modal for 5 seconds and then hide it, I use async in my mobx function but even though I set error variable to '', the modal keeps showing, so error variable is correctly set to error message but it's not coming back to default state "", this means delay action is not correctly being awaited?

In AppStore.js

async handleAppError(error)
    {
        const delay = (ms) => new Promise((res) => setTimeout(res, ms));
        this.setError('¡Oops, algo salió mal! Intentalo más tarde');
        await delay(5000);
        this.setError('');
    }

setError(payload)
    {
        this.error = payload;
    }

How I show and hide modal is very simple, modal never actually hides after 5 seconds...

{ root.mapStore.error != '' && (
        <ErrorModal1></ErrorModal1>
        )}