not working for multi-instance with wrap Context

[hans000]

https://codesandbox.io/p/sandbox/nice-modal-pl4l62?file=%2Fsrc%2FApp.tsx%3A13%2C44

[mitchellgenovaold]

@hans000 It appears that codesandbox no longer exists

[zhipeng-08]

encounter the same problem, click any btn, it will only show the last number.

import { createContext, useContext } from "react";
import NiceModal from "@ebay/nice-modal-react";

const Ctx = createContext<{ number: number }>({ number: 1 });

const ModalItem = NiceModal.create(() => {
  const { number } = useContext(Ctx);
  return <div>{number}</div>;
});

export default function App() {
  return (
    <div className="App">
      {Array.from({ length: 3 }, (nil, i) => {
        return (
          <div key={i}>
            <Ctx.Provider value={{ number: i }}>
              <NiceModal.Provider>
                <button
                  onClick={() => {
                    NiceModal.show(ModalItem);
                  }}
                >
                  btn {i}
                </button>
              </NiceModal.Provider>
            </Ctx.Provider>
          </div>
        );
      })}
    </div>
  );
}

https://codesandbox.io/p/sandbox/667gx8?file=%2Fsrc%2FApp.tsx%3A21%2C35

[zhipeng-08]

i think it's because of this

To fix this issue, the [dispatch] method should be added to the [modalContext].
Then, when there are multiple instances of [NiceModalProvider], you can use [useModal] to load the [modal] into the correct [modalContext].