Why is <MDXRemote> outputting an undefined object?

[LinguiniThePasta]

I have a code here that fetches an array of MDX strings from a mongoDB server, and per a previous discussion post, I use MDXRemote to render it as an mdx string.
Here is a snippet of my code:

const [blogs, setBlogs] = useState([]);
    useEffect(() => {
        async function fetchAllBlogs() {
            const response = await fetch("http://localhost:3000/api/getAllBlogs");
            const blogs = await response.json();
            const blogMDXPromises  = blogs.map(async (blog) => {
                const serializedMDX = await serialize(blog.mdx);
                <li key={blog._id}>
                    <MDXRemote {...serializedMDX} />
                </li>
            })
            const resolvedBlogMDX = await Promise.all(blogMDXPromises);
            console.log("blogs ", blogs);
            console.log("blogsMDX ", resolvedBlogMDX);
            setBlogs(resolvedBlogMDX);
        }
        fetchAllBlogs();
    }, []);

This essentially just takes the blog strings array returned from the MongoDB server, and tries to convert it into a bunch of MDX renderings in resolvedBlogMDX . The issue now is that resolvedBlogMDX contains undefined. Here's the print statements from the console.log() outputs:

blogs  
Array [ {…} ]
​
0: Object { _id: "66358b465fb668714ea217b3", mdx: "---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n\n\nHere's a **neat** demo\n:" }
​​
_id: "66358b465fb668714ea217b3"
​​
mdx: "---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n\n\nHere's a **neat** demo\n:"
​​
<prototype>: Object { … }
​
length: 1
​
<prototype>: Array []
[index.tsx:52:20](webpack://_N_E/pages/index.tsx?07ff)
blogsMDX  
Array [ undefined ]
​
0: undefined
​
length: 1
​
<prototype>: Array []
[index.tsx:53:20](webpack://_N_E/pages/index.tsx?07ff)

As you can see, resolvedBlogMDX contains an "undefined" item, but blogs has the correct output with the mdx string. Why is it outputting undefined?

[wooorm]

MDXRemote isn’t maintained here. You’re best off asking there.

It looks like you have problems with your knowledge of JavaScript though: your arrow function has braces ({ and }) but does not have a return statement. So, it returns undefined.