React.js, изменение переменной useReducer только при повторном клике

Предположим, что имеется некая форма с кнопкой, в которой по умолчанию переменная startPage равна true, при нажатии по кнопке значение startPage изменяется на false и на форме отображается стрелка, при нажатии на которую можно вернуться к стартовой форме. Действительно, при нажатии на стрелку форма переходит к стартовому виду, но стрелка при этом не пропадает, а пропадает лишь при повторном нажатии на нее.

Компонент который содержит саму стрелку

function Form() {
    const { startPage, hideArrow } = useContext(CloseContext)

    return (
        <>
            <div className="app__container absolute-center">
                {startPage ? '' : <LeftArrow className="app__close-button" onClick={() => hideArrow()} />}
                <div className="app__content-left">
                    <img src="img/img-2.svg" alt="" className="app__main-image absolute-center" />
                </div>
                <div className="app__content-right">
                    <EnterType />
                </div>
            </div>
        </>
    )
}

Для работы с изменением значений отображения стрелки используется Context и useReducer(в документации упоминается, что в Context лучше использовать именно его, вместо useState)

export const CloseContext = createContext()

function reducer(state, action) {
    switch (action.type) {
        case 'HIDE': return { startPage: true };
        case 'VISIBLE': return { startPage: false };
        default: return state;
    }
}

const CloseContextProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, { startPage: true });
    const { isSubmitted, cancelForm } = useContext(FormTransitionContext)

    const visibleArrow = () => {
        dispatch({
            type: 'VISIBLE'
        })
    }

    const hideArrow = () => {
        dispatch({
            type: 'HIDE'
        })
        isSubmitted && cancelForm()
    }

    return (
        <CloseContext.Provider value={{ startPage: state.startPage, visibleArrow, hideArrow }}>
            {children}
        </CloseContext.Provider>
    )
}

export default CloseContextProvider