Хук React не отображается мгновенно

Question

Я пытаюсь написать запуск / закрытие btn, нажав на btn. Btn должен отображаться на основе изменения состояния. Я использую startFlag, чтобы изменить btn, так как startFlag будет сохраняться в хуках, так что если я перейду на другую страницу, startFlag будет иметь исходное значение. Однако я обнаружил, что этот метод не отображает компонент немедленно. Он отображается, если я обновляю sh страницу. Например: если я щелкнул startBtn, в main я установил startFlag на true. Однако closeBtn не будет отображаться, если я не обновлю sh. Есть ли проблемы с моей реализацией?

import React, {useContext, useEffect, useState} from 'react'
import { mainContext } from '../../Main'
import Startbtn from './Startbtn'
import Stopbtn from './Stopbtn'
export default function SingleTaskControlbtn({startFlag, uuid}) {
    const [switchToStop, setSwitchToStop] = useState(false);
    const {
        handleStart,
        handleStop,
    } = useContext(mainContext)

    useEffect(()=>{
        setSwitchToStop(startFlag)
    }, [startFlag])

    return (
        <div>
            <div 
                className="btn-first-pos"
                onClick={()=>{
                    handleStart(uuid)
                }}
            >
                <Startbtn/>
            </div>
            { 
                switchToStop
                &&
                <div 
                    className="btn-first-pos"
                    onClick={()=>{
                        handleStop(uuid)
                    }}
                >
                    <Stopbtn/>
                </div>
            }
        </div>
    )
}