Re-finding a component with Enzyme still doesn't return what should be the correct prop value

I have these two components. One is a modal and another is a button the should open that modal (it is opened by passing true to its isOpen prop.

The modal starts of with isOpen being false, then when the button is clicked, it changes that state to true. When compiling it woks just fine as intended. In my tests though, it keeps returning false as the value of isOpen even after clicking the button.

These are my two components and the state he handles them:

  const [isManagePaymentSourceShowing, setIsManagePaymentSourceShowing] = useState(false);

  <ManageSubscriptionModal
   isOpen={isManageSubscriptionShowing}
   onClickX={closeManageSubscriptionModals}
   onClickCancelSubscription={() => setIsSignInAgainShowing(true)}
   data-test="amsp-manage-subscription-modal"
  />

  <TextCtaButton
   fontSize={["13px", "12px"]}
   fontWeight="600"
   textTransform="uppercase"
   onClick={() => {
   setIsManagePaymentSourceShowing(true);
   console.log("Button was clicked ".repeat(100));
   }}
   data-test="amsp-manage-payment-source-button"
   >
      manage payment source
   </TextCtaButton>

I've added that console log too and I see that the button does get clicked in the test.

This is the test I am trying to run:

const setup = (userSubscription = userSubscriptionFixture()) => {
  return mount(
    <Wrapper>
      <AccountManagementSubscriptionPresentational
        subscriptionProduct={undefined}
        userSubscription={userSubscription}
      />
    </Wrapper>
  );
};

describe("Check modal display toggles work", () => {
  let wrapper;
  let modal;
  let updatedModal;
  let openButton;
  let openFunction;

  test("<ManagePaymentSourceModal>", () => {
    wrapper = setup();
    modal = wrapper.find(`[data-test="amsp-manage-payment-source-modal"]`);
    openButton = wrapper.find(
      `[data-test="amsp-manage-payment-source-button"]`
    );
    openFunction = openButton.prop("onClick") as () => void;

    expect(modal.prop("isOpen")).toBeFalsy();
    openFunction();
    updatedModal = wrapper.find(
      `[data-test="amsp-manage-payment-source-modal"]`
    );
    expect(updatedModal.prop("isOpen")).toBeTruthy();
  });
});

That last expect always fails saying it expected true and got false instead.

EDIT: I've tried tuning the test into an async function thing mabe it's the state change that just takes too long, but that didn't work either. This is how I've tried it:

  test("<ManagePaymentSourceModal>", async () => {
    wrapper = setup();
    modal = wrapper.find(`[data-test="amsp-manage-payment-source-modal"]`);
    openFunction = wrapper
      .find(`[data-test="amsp-manage-payment-source-button"]`)
      .prop("onClick") as () => void;

    expect(modal.prop("isOpen")).toBe(false);
    await openFunction();
    updatedModal = wrapper.find(
      `[data-test="amsp-manage-payment-source-modal"]`
    );
    expect(updatedModal.prop("isOpen")).toBe(true);
  });