I cannot import the component into my mdx file

When i was trying to import the components into my mdx file i got this error

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 am using nextjs 11 with latest mdx-bundler version here is my file which bundler mdx to html

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

import { bundleMDX } from 'mdx-bundler'
if (process.platform === 'win32') {
  process.env.ESBUILD_BINARY_PATH = path.join(
    process.cwd(),
    'node_modules',
    'esbuild',
    'esbuild.exe',
  );
} else {
  process.env.ESBUILD_BINARY_PATH = path.join(
    process.cwd(),
    'node_modules',
    'esbuild',
    'bin',
    'esbuild',
  );
}
export const contentPath = path.join(process.cwd(), 'articles')
export const componentPath = path.join(process.cwd(), 'src/components');
export const getMdxSource = (mdxFile) => {
  return fs.readFileSync(path.join(contentPath, mdxFile));
}
export const getSortedContent = () => {
  return fs.readdirSync(contentPath).filter((path) => /\.mdx?$/.test(path)).map((mdxFile) => {
    const source = getMdxSource(mdxFile);
      const slug = mdxFile.replace(/\.mdx?$/, "");
      const { data } = matter(source);

      return {
        frontmatter: data,
        slug: slug,
      }
  }).sort((a, b) => {
    return new Date(a.frontmatter?.date) < new Date(b.frontmatter?.date) ? 1 : -1;
  });
}
export const getContentbyData = async(slug) => {
  const source = getMdxSource(slug + ".mdx");
  const { code, frontmatter } = await bundleMDX(source, {
    cwd: process.cwd(),
 })

  return {
    frontmatter,
    code,
  };
}

my mdx file

---
title: What is Programming ?
author: IshanKBG
date: 07-24-2021
---
import Hello from "src/components/Hello"

Before knowing what is programming you must know the what are computers and how they work.
I know that most of you know what are computers and you are actually using it to read this article.
If I say in simple words computers are just machines performing arithmetical and logical operations for you. Computers run programs which contains some sets of instructions to perform different tasks for you and programming is a process of writing set of instructions to tell computer to perform certain task. For example imagine you are trying to make a cake and to make it you have to follow some sort of instructions.
Those instructions must be in an arranged and sequenced manner else your cake will not become as you want to be as you can’t add eggs after baking. Making a cake is a same as writing programs as you have to write each and every piece of code in an arranged and sequenced manner in order to make it work as intended.
# Should I learn programming ?
<Hello />
This type of question has multiple answers, it depends on the person who is willing to either learn it or not. For some people programming is just a job, for some it’s only business or money and for some people it’s a grand passion of their life. Some want to learn programming so that they can stimulate robotic hands, for some it’s game development and for some it’s web development. It depends on where and how you want to apply programming skills. So ask this question to you and you will find the answer
Some might ask that why did I learn programming and my answer is that I have always been intrigued by computers and thought of them as a means to bridge the gap between countries and entire continents, allowing people from various communities to communicate with each other, I was fascinated by how it all worked and so I decided to pursue Programming as my career choice.

Github repo: https://github.com/IshanKBG/ishankbg.dev

[IshanKBG]

Actually this issue got fixed after i changed the extension from .js to .jsx. I am not sure why this is issue getting caused

[IshanKBG]

Ya it’s now working