You're definitely right - modalContext has to be inside the provider.

One solution is to modify ModalProvider to render the modals instead of only exposing it to its descendants. So the provider could render something like this

  const modalNodes = React.useMemo(
    () =>
      modals.map(([modal, key]) => (
        <React.Fragment key={key}>{modal}</React.Fragment>
      )),
    [modalContext.modals],
  );
...
<ModalContext.Provider value={value}>
  {children}
  {modalNodes}
</ModalContext.Provider>

An additional benefit is that the main landing page no longer needs to know implementation details of the provider to use it correctly. Also, not exposing modals from the context may improve the performance. The downside is that the provider decides where to render the modals and it can't be in any place of the app - that doesn't hurt us at the moment.

The same approach could be also used on web (and probably should be used from the beginning).