Can't import SVG in Gatsby TypeScript Project - Element type is invalid: expected a string

[hhimanshu]

I am trying to use svg files in my Gatsby TypeScript project. I am making use of gatsby-plugin-react-svg, and the error I see on the app is

One unhandled runtime error found in your files. See the list below to fix it:


Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
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. Check the render method of `IndexPage`.

I leveraged the information mentioned in https://stackoverflow.com/questions/64780769/error-while-using-svg-in-gatsby-typescript

I have reproduced the error in the repository linked below

https://github.com/hhimanshu/gatsby-svg-import-example

Could someone please let me know what I am doing wrong?

Thank you