Playground.tsx

import { Suspense, lazy, memo, Children } from 'react';

import { createFileMap } from './createFileMap';

const SandpackRoot = lazy(() => import('./SandpackRoot'));

type PlaygroundProps = {
  children: React.ReactNode;
};

export default memo(function Playground(props: PlaygroundProps) {
  const codeSnippets = Children.toArray(props.children) as React.ReactElement[];
  const files = createFileMap(codeSnippets);

  return (
    <Suspense>
      <SandpackRoot files={files} {...props} />
    </Suspense>
  );
});