CustomMDXCode.js

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

const CustomMDXCode = props => {
  return (
    <Sandpack
      template={props.template}
      files={{ [`/${props.filename}`]: props.children }}
    />
  );
};

export default CustomMDXCode;