React钩子无法立即渲染

I am trying to write a start/close btn by clicking the btn. The btn should be rendered based on the state change. I use startFlag to change the btn, since the startFlag will store into the hooks, so that if I changed to other page, the startFlag would set to its original value. However, I found that this method won't render the component immediately. It renders if I refresh the page. For example: if I clicked startBtn, in the main I have set the startFlag to true. However, the closeBtn won't show unless if I refresh. Is there any problem with my implementation?

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>
    )
}