MDX pages not rendering in Gatsby.js

[hbhutta3]

Hi, I am making a website using Gatsby.js and I will have a blog in this website. I am trying to use MDX pages in Gatsby.js to be properly render math (e.g. LaTeX or KaTeX) and markdown syntax. I have looked at both of these tutorials (Adding MDX pages and Adding Markdown Pages).

For example, I have a sample.mdx file with this code:

import Layout from "../components/layout";

<Layout>

# Testing header 1

## Testing header 2 and math
$f(x) = 2$

</Layout>

And I've wrapped my MDX in a JSX component as you can see here. However, when I display it, the wrapping with the JSX component works, but right now the MDX is not rendering properly:

Right now, when I run npm list:

I have all the required packages for the rendering I believe.

I also create my project with npm init gatsby if that makes a difference.

My gatsby config file is proper too:

I'm really confused about why it's not rendering properly. Any help would be appreciated. Thanks!