Flag setting issue in React - reactjs

Question

So basically I'm trying to tie in the Login and Sign Up component to the Main component by making use of onClick action of a button.
Given below is the code segment
function Dev({value}){
const [isButton, ButtonClicked ] = useState(false);
const handleClick=()=> ButtonClicked(!isButton);
return(
<div>
<Card>
<CardImg top width="100%" src={value.src} alt="Card image cap" />
<CardBody>
<CardTitle className='text-card'>{value.title}</CardTitle>
<CardText className='text-text'>{value.text}</CardText>
<Button className='text-button' onClick={handleClick}>{value.button}<i class={value.icon} aria-hidden="true"></i></Button>
</CardBody>
</Card>
{isButton && (value.id ? <Login open={true} /> : <Sign open={true}/>)}
</div>
);
}
The code works fine, but there is an issue.
When I first click on the button, isButton will be set to true and the Login component will pop up. After closing it, I have to click twice on the button to render the Login component again.
I know the reason behind this; when I click on the button the second time isButton will be toggled to false and I should click again to toggle it to true. This is kind of inappropriate, is there any way to work around this issue?
The code for Login Component
const Login = (props) => {
const [modal, setModal] = useState(props.open);
const toggle = () => setModal(!modal);
return (
<div>
<Modal isOpen={modal} toggle={toggle}>
<ModalHeader toggle={toggle}>Login</ModalHeader>
<ModalBody>
.
.
.
</ModalBody>
</Modal>
</div>
);
}
export default Login;