How to write test case for modal open on button click

[ashusnp]

I am writing a test for modal confirmation on button click. I am using faceless-ui/modal the click is working fine but the modal is not opening(Debug the screen no HTML is present for the modal).

 <Modal slug='deleteModal' className='delete-document'>
          <MinimalTemplate className='delete-document__template'>
            <h1>Confirm Delete</h1>
            <p>Are you sure you want to delete this user?</p>
            <p>{userToDelete && userToDelete.email}</p>
            <Button buttonStyle='secondary' className="modal-button" onClick={() => { deleteUser() }}>Yes</Button>
            <Button buttonStyle='secondary' className="modal-button" onClick={() => { closeModal('deleteModal') }}>Cancel</Button>
          </MinimalTemplate>
        </Modal>

const mockToggleModal = jest.fn()
jest.mock('@faceless-ui/modal', () => ({
  Modal: jest.fn(),
  useModal: jest.fn(jest.fn(() => ({
    toggleModal: mockToggleModal,
    closeModal: jest.fn(),
  }))),
}));

If I am not adding mocking for the modal then getting an error as

can not read properties of undefined ('deleteModal')

And with mocking Modal is not showing in DOM.

test('click on delete icon and popup open', async () => {
   const { container } = render(
     <MemoryRouter>
       <CustomDeleteButton rowData={rowData} />
     </MemoryRouter>
   );
  
   fireEvent.click(container.querySelector('#deleteButton'), new MouseEvent('click', { bubbles: true }));
  
   await waitFor(() => {
     expect(mockToggleModal).toHaveBeenCalled(); // this is working properly
     console.log(prettyDOM())
    
     // expect(screen.getByText('Are you sure you want to delete this user?')).toBeInTheDocument(); // this is not working
   })
 });

```Note: I tried different approaches like using act, adding delay

I tried different approaches like using act and adding delay. and I am expecting that Modal dom should show up in prettyDOM() or debug

using jest for unit test case