I can not set my React modal's background. How can I do it?

In my project, I have a contact table and when we want, we can delete input values. If click the deleted values, the table opens a modal. If I have 6 contacts' information, the modals background is dark. But if I have just 2 contacts' info in my table, the modals background is little bit dark. How can I solve this problem?

This is my modal component page;

    return (
    <>
      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        
{children}
       
        
      </Modal>
    </>
  );

This is my table page;

return (

    <>
    <tr>
        <td>{addForm.fullName}</td>
        <td>   {addForm.email}</td>
        <td>{addForm.phoneNumber}</td>
        <td>{addForm.country}</td>
        <td>
            <div className="icon-delete" onClick={() => setShowModal(true)}> </div>
        </td>
    </tr>
   <ModalComponent
    show={showModal}
    handleClose={handleClose}>
    <Modal.Header closeButton>
    
            </Modal.Header>
    <Modal.Body>
     <p> <b> Are you sure you want to delete? </b> </p>
    </Modal.Body>
  <Modal.Footer>
    <Button variant="primary" onClick={()=> handleClose(addForm.id)}>
      Yes
    </Button>
    <Button variant="secondary" onClick={()=>setShowModal(false)}> No </Button>
  </Modal.Footer>
  </ModalComponent>
        </>

);