Триггер рендеринга после setTimeout в реакции

Question

Я пытаюсь разобраться в React, и я делаю несколько проектов. Один из них связан с повторным рендерингом компонента после изменения переменной после завершения setTime.

Я предполагаю, что он должен выполнить повторный рендеринг, так как он изменяется после первоначального рендеринга (и что он не реагирует (хе) на обновленная переменная.

Я полагаю, что я неправильно понимаю некоторые основы React.

Стрелки для обозначения моей проблемы.

Компонент:

import React from 'react';
import classes from './Navigation.module.css';

const navigation = (props) => {
    let attachedClasses = [classes.SmallDot];
    let showCloseButton = false; <-------!
    if (props.currentState) {
        attachedClasses = [classes.BigDot]
        setTimeout(() => {
            showCloseButton = true; <----------!
        }, 500)

    }

    return (
        <div onClick={props.currentState ? null : props.toggleMenuState} className={attachedClasses.join(' ')}>
            {showCloseButton ? <--------!
                <div onClick={props.toggleMenuState} className={classes.CloseButton}>
                    <div>X</div>
                </div>
                : null}
        </div>
    )
};

export default navigation;