My app has a button in navbar where when clicked opens a change password modal. I need to test this. I cant seem to be able to find the contents when i click the button in the test.
here is my Changepassword test.

import CommonStore from '../app/common/stores/CommonStore.ts';
import { store } from '../app/common/stores/store.ts';
import { render } from '../test-utils';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from '../app/Layout/App.tsx';

test('Change Password Successfully', async () => {
  const commonStore = new CommonStore();

  store.commonStore.setToken('faketoken');
  render(<App />, {
    routeHistory: [],
    store: { commonStore },
  });
  await waitFor(() => {
    expect(screen.getByText(/Agent Report/i)).toBeInTheDocument();
  });

  const ChangePasswordButton = screen.getByText(/Change Password/i);
  await userEvent.click(ChangePasswordButton);

  await waitFor(() => {
    expect(screen.getByText(/Old Password/i)).toBeInTheDocument();
  });
});

here is my modal container:

import { observer } from 'mobx-react-lite';
import { Modal } from 'semantic-ui-react';
import { useStore } from '../stores/store';

export default observer(function ModalContainer() {
  const { modalStore } = useStore();
  return (
    <Modal
      open={modalStore.modal.open}
      closeOnDimmerClick={false}
      onClose={modalStore.closeModal}
      size="mini">
      <Modal.Content>{modalStore.modal.body}</Modal.Content>
    </Modal>
  );
});

and this is the function my changepassword button is connected to:

 const openChangePasswordModal = () => {
    store.modalStore.openModal(<ChangePassword />);
  };

I have tried expecting the modal to open as i clicked the button