Error: Element type is invalid: expected a string (for built-in components)

I am getting an error when rendering the MDX content using nextjs 13 and react 18.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I think the error is coming from here:

return <MDXLayout layout={layout} components={MDXComponents} {...rest} />

export const MDXComponents = {
    Image,
    TOCInline,
    a: CustomLink,
    pre: Pre,
    wrapper: ({ components, layout, ...rest }) => {
        const Layout = require(`../layouts/${layout}`).default
        return <Layout {...rest} />
    },
}

export default function MDXLayoutRenderer({ layout, mdxSource, ...rest }) {
    const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])

    return <>Test</>
        // error coming from this line
    //return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
}

"next": "13.1.2",
"react": "18.2.0",
"esbuild": "^0.16.17",
"mdx-bundler": "^9.2.1",

I am not sure why I get this error. Thanks

kentcdodds / mdx-bundler

Error: Element type is invalid: expected a string (for built-in components) #207