StakedModal.js

function StakedModal() {
  const {modal} = ModalContext.useContext(['modal']);

  const [{
    modals,
  }, ss] = useStateReducer({
    modals: [],
  });

  const create = () => {
    const random = getUniqueNumber();
    ss(state => ({modals: [...state.modals, random]}));
    modal.add({
      contentEl: (
        <div style={{background: 'white', width: '100px', height: `${Math.random() * 3000}px`, display: 'flex', alignItems: 'flex-end'}}>
          <button onClick={create}>{random}</button>
        </div>
      ),
      id: random,
      isCloseCrossHidden: true,
      onRemove: () => ss(state => ({modals: state.modals.filter(id => id !== random)})),
    });
  };

  useEffect(() => {
    setTimeout(() => {
      create();
    }, 1000);
  }, []);

  return (
    <>
      {modals.map(id => modal.get(id))}
    </>
  );
}