useEffect not triggering modal events after initial component render

[rhaf21]

When using the useEffect hook to automatically show a modal when a component mounts, the modal events are not triggered after the initial component render. The modal is shown when the component first mounts, but subsequent events (like hiding the modal) are not triggered.

Expected behaviour

The modal should close when the close button is clicked, and the useEffect hook should not interfere with this behavior.

Contextual information

Packages and versions

• @shopify/app-bridge @ 3.7.10
• @shopify/app-bridge-react @ 4.0.0
• @shopify/polaris @ 12.1.1

Platform

• App: [for example Shopify Mobile, Shopify POS, Chrome, Safari, Firefox]

Additional context

Here's the code I'm using to show and hide the modal:

const [isModalShown, setIsModalShown] = useState(false);

  const toggleModal = () => {
    if (isModalShown) {
      shopify.modal.hide("editor-modal");
      setIsModalShown(false);
    } else {
      shopify.modal.show("editor-modal");
      setIsModalShown(true);
    }
  };

  useEffect(() => {
    if (!isModalShown) {
      toggleModal();
    }
    console.log("Editor page mounted");
  }, []);

In this code, toggleModal is called in a useEffect hook when the component mounts. This shows the modal. However, when I try to close the modal, it does not close.

It used to work before with @shopify/app-bridge-react@3..`

[elifsgban]

I am having a similar issue with @shopify/app-bridge-react@4.0.0 version. I want to show a modal when the app is opened and it throws a console error. After refreshing the page the errors are gone and the modal opens.
I set the modal's open property to true and I tried adding shopify.modal.show() inside useEffect().

console error;