React js auto refresh on accessing component - reactjs

Question

This is Home
function Home(){
const [posts,setPosts] = useState([])
const [isLogged,setActive] = useState(false)
const history = useHistory()
function handleSubmit(e)
{
e.preventDefault()
history.push(`/${e.target.name}`)
}
function handleLogout(e){
e.preventDefault()
setActive(false)
cookies.remove('blog')
}
useEffect(async ()=> {
try{const res = await axios.get('/api/posts')
setPosts(res.data)
if(cookies.get('blog'))
setActive(true)
} catch(err){
console.log('internal error')
}
},[])
return (
<div>
<header className='h-head'>
<div className='h-head-internal'>
<h1 className='head-h1'>Travel Blog</h1>
{ isLogged ? null : <button className='head-btn' name='Signup' onClick={handleSubmit}>Sign-Up</button>}
{ isLogged ? null :<button className='head-btn' name='Signin' onClick={handleSubmit}>Sign-In</button>}
{ isLogged ? <button className='head-btn' name='Createpost' onClick={handleSubmit}>Create-Post</button> : null }
{ isLogged ? <button className='head-btn' name='Logout' onClick={handleLogout}>LogOut</button> : null }
</div>
</header>
<h1 className='post'>POSTS</h1>
<div className='container'>
{posts.map(post => {
return <Post title={post.title} author={post.author} description={post.description} image={post.image} />
})}
</div>
</div>
)
}
export default Home
On returning to home page signup and signin are to be replaced by logout and create post as cookies has been saved in browser but it is not detecting it unless I refresh the page so, what to do
function Signin(){
const [data, setData] = useState({
email:"",
password:""
})
const history = useHistory()
async function signinpost(){
const res = await axios.post('/api/signin',data)
if(!res)
return console.log(res)
console.log(res)
}
function Redirecthandler(e) {
e.preventDefault()
history.push('/Signup')
}
function handleChange(e){
const { name, value } = e.target
setData(prev => {
return {
...prev,
[name]:value
}
}) }
function handleSubmit(e){
e.preventDefault()
signinpost()
history.push('/')
}
return (
<React.Fragment>
<div className='main flex'>
<header className='head'>
<h1>Travel Blog</h1>
</header>
<form className='flex form-top-pad' method='post'>
<div>
<label className='label label-left-pad' for='email'>EMAIL :</label>
<input className='input' type='email' name='email' placeholder='Email' onChange={handleChange}/>
</div>
<div>
<label className='label' for='password'>PASSWORD :</label>
<input className='input' type='password' name='password' placeholder='Password' onChange={handleChange} />
</div>
<input className='btn' type='submit' value='SIGNIN' onClick={handleSubmit} />
<button className='under-btn' onClick={Redirecthandler}>
New User ? Get Started
</button>
</form>
</div>
</React.Fragment>
)
}
export default Signin
I am redirecting from signin page to home after setting cookies in browser but the signin and signup button are not getting disabled without refresh how can I trigger a auto refresh whenever the home component is accessed please help