Flag setting issue in React

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;