Add Popup to a custom react-map-gl map

[fabripetrelli]

Hello everyone, I'm having trouble adding a Popup to what I'll call a "custom instance" of react-map-gl. This "custom instance" is a component exported from a component library I created using Storybook. It's essentially just a map with some predefined style and mapStyle configuration.

Whenever I try to add this map to another project and use a Popup, I get the following error:

Uncaught TypeError: import_react5.useContext(...) is null
    Popup popup.ts:42
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
[popup.ts:42:35](http://localhost:5173/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/react-map-gl/src/components/popup.ts)
    Popup popup.ts:42
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533

I’ve looked into the code in popup.ts at line 42 and thought that since the Popup is in a different instance of react-map-gl, they might not share the same context. Am I correct in thinking this?
Has anyone experienced similar issues when integrating a Popup into a custom instance of react-map-gl?
I’d appreciate any suggestions or insights on how to resolve this issue!

Originally posted by @fabripetrelli in #2445

[chrisgervang]

Could you please provide a MRE? It's hard to say what is causing this issue. Something like this should work:

// lib.js  
export const MyCustomMap = ({popup}) => (
  <Map>
    {popup}
  </Map>
)

// user.js
<MyCustomMap popup={<Popup/>}/>