How to update a state, by taking reference of other state - reactjs

Question

I am working on a React project In my project I have two components one is Parent and another one is Child. In Parent component I have two buttons, one is Signup button and another one is Login Button. I imported Child component to Parent component, In Child component I have only Signup form is there. So I put state for Child component, that state logic contains initially Child component has to hide when I click Sigup button at that time only I have to show Child component up to here I have done. But here I was struck, When I click Signup button then I have hide both Signup and Login buttons, In output I have to show only Signup form.
This is Parent.js
import React, { useState } from 'react';
import Child from './Child/Child'
import './Parent.css';
const Parent = () => {
const [show, setShow] = useState(false)
const [showButtons, setShowButtons] = useState(true)
const showComponent = () => {
setShow(true)
}
const hideButtons = () => {
if(setShow(true)) {
setShowButtons(false)
}
}
return (
<div className='container'>
<div className='row'>
{showButtons &&
<div className='col-12' style={{display:"flex"}}>
<div className='col-6'>
<button className='btn btn-primary' onClick={() => {hideButtons(); showComponent()}}>Signup Form</button>
</div>
<div className='col-6'>
<button className='btn btn-danger'>Login Form</button>
</div>
</div>
}
</div>
<div className='row'>
<div className='col-12'>
{show && <Child></Child> }
</div>
</div>
</div>
)
}
export default Parent
This is Child.js
import React, { useState } from 'react';
import './Child.css';
const Child = () => {
return (
<div className='container'>
<div className='row justify-content-center'>
<div className='col-6'>
<div className='signupForm'>
<form>
<div className="form-group">
<label htmlFor="name">Name</label>
<input type="text" className="form-control" id="name" placeholder="Enter name"></input>
</div>
<div className="form-group">
<label htmlFor="email">Email</label>
<input type="email" className="form-control" id="email" placeholder="Enter email"></input>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input type="password" className="form-control" id="password" placeholder="Enter password"></input>
</div>
<div className="form-group">
<label htmlFor="confirmPassword">Confirm Password</label>
<input type="password" className="form-control" id="confirmPassword" placeholder="Confirm password"></input>
</div>
<button type="submit" className="btn btn-primary mt-3">Submit</button>
</form>
</div>
</div>
</div>
</div>
)
}
export default Child
If you think I am not clear with question please ask me where I am not clear

Answer 1

Do the following change in your parent.js then it will work
const hideButtons = () => {
setShowButtons(false);
};
Codesandbox here

Answer 2

You are currently testing your setShow function for truthiness, but you want to test its corresponding value. So change your hideButtons function to this:
const hideButtons = () => {
if(show) {
setShowButtons(false)
}
}