ReTabNews

Gosto da abordagem, ela demonstra como o React abraça a composição, não se restringindo à componentes de apresentação. Componentes como QueueComponents implementam a lógica para manipular a renderização.

É possível simplificar o JSX para algo parecido com:

function App() {
  return (
    <QueueComponents>
      <Modal1 />
      <Modal2 />
    </QueueComponents>
  );
}

Perceba que children já é uma coleção de ReactElement, logo QueueComponents pode tirar vantagem disso:

type Props = {
  children: ReactElement[];
};

function QueueComponents({ children }: Props) {
  const [queue, setQueue] = useState<ReactElement[]>(children);
  const [current, setCurrent] = useState<ReactElement | null>(
    children?.[0] ?? null
  );

  function processQueue() {
    const newQueue = queue.slice(1);
    setQueue(newQueue);
    setCurrent(newQueue[0] ?? null);
  }

  if (!current) return null;

  return cloneElement(current, { processQueue });
}

Vale mencionar React.Children.toArray(children) tende a ser melhor opção para o caso de uma manipulação mais complexa de children

Para mais informações sobre a propriedade children: