I want to make a modal for my App. I've tried everything, and my closeicon won't close my modal. It works fine when I do modal in the same file, but I want make my modal as separate component. Is something wrong with my code?

Parent Component:

import { Card, Placeholder, Image, Icon } from "semantic-ui-react";
import BookModal from "./BookModal";
import { useState } from "react";

const BookCard = props => {

    const [showModal, setShowModal] = useState(false)


    return (
        <Card onClick={() => setShowModal(true)}>
            <Image><Placeholder><Image src={props.image} size="large" /></Placeholder></Image>
            <Card.Content>
                <Card.Header>{props.title}</Card.Header>
                <Card.Meta>
                    <span className='date'>{props.publishedDate}</span>
                </Card.Meta>
                <Card.Description>{props.author}</Card.Description>
            </Card.Content>
            <Card.Content extra>
                <Icon name='star'>Rating</Icon>    
            </Card.Content>
            <BookModal key="Modal1" open={showModal} onClose={() => setShowModal(false)}/>
        </Card>
     );
}
 
export default BookCard;

Children Component Modal:

import { Modal } from "semantic-ui-react";

const BookModal = props => {

    return ( 
        <Modal
          closeIcon
          onClose={props.onClose}
          open={props.open} >

            <Modal.Header>
              <h2>Modal content</h2>
            </Modal.Header>

        </Modal>
     );
}

 
export default BookModal;