jest test if modal component is being opened

Question

I have a nextJs/React/Bootstrap app with a Bootstrap modal component. I am using Jest to test. I cannot get jest to find the modal component on the rendered page after I simulate clicking the button that pops up then modal dialog.

here is my code:

modalObjType:

    export type modalObjectType = {
      show: boolean,
      title: string,
      message: string,
      id: string
    }
    
    export const initModalObj: modalObjectType = {
      show: false,
      title: 'title',
      message: 'message',
      id: "0"
    }

modelConfirm.tsx:

    import Button from 'react-bootstrap/Button';
    import Modal from 'react-bootstrap/Modal';
    
    export const delConfTitle = 'Confirm Delete'
    
    interface ChildProps {
      show: boolean,
      title: string,
      message: string,
      onConfirm: () => void;
      onCancel?: () => void;
    }
    
    const ModalConfirm: React.FC<ChildProps> = ({ 
      show,
      title: heading,
      message,
      onConfirm,
      onCancel
    }) => { 
    
      return (
        <>
          <Modal show={show} onHide={onCancel} data-testid="modalConfirm">
            <Modal.Header closeButton>
              <Modal.Title>{heading}</Modal.Title>
            </Modal.Header>
            <Modal.Body>{message}</Modal.Body>
            <Modal.Footer>
              <Button className='me-2' variant="success" onClick={onConfirm}>
                OK
              </Button>
              <Button variant="danger" onClick={onCancel}>
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
        </>
      )
    }
    
    export default ModalConfirm;

page.tsx:

    import ModalConfirm, { delConfTitle } from "@/components/modal/confirmModal";
    import { initModalObj } from "@/components/modal/modalObjType";
    
    const Home = ({
        
      const [confModalObj, setConfModalObj] = useState(initModalObj);
        
      const handleDelete = () => {  
        setConfModalObj({
          show: true,
          title: delConfTitle,
          message: `Do you want to delete Event: ${toDelName}?`,
          id: id,
        }); // deletion done in elsewhere
      };
        
        
        return (
        <>
          <ModalConfirm
            show={confModalObj.show}
            title={confModalObj.title}
            message={confModalObj.message}
            onConfirm={confirmedDelete}
            onCancel={canceledDelete}
          />
          <button
            onClick={() => handleDelete(id)}
          >
            Delete
          </button>   
        </>
        )
    })
    
    export default Home;

Thanks for any help!