How to fix the regular error using react-icons in React with Typescript?

Starting from version 19, the typings for @types/react introduced a major change!
Now, by default, the JSX namespace is no longer available, and you have to explicitly define it yourself.

🧠 Why did this happen?
In the new versions of TypeScript and React typings:

JSX.Element is not available directly unless you properly configure your environment.

If your project is old, or if your tsconfig.json file is missing some settings, TypeScript will not be able to recognize JSX.

💡 Solution 1 (Quick and Easy):

Go to your project’s tsconfig.json file.
Make sure you have these important options configured like this:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esnext",
    "target": "esnext",
    ...
  }
}

👉 The most important part is:
"jsx": "react-jsx"

💡 Solution 2 (Definitive and 100% Working):

Create a new file called global.d.ts at the root of your project.
Inside it, add the following lines:

/// <reference types="react" />
/// <reference types="react-dom" />

This tells the project:
"Hey buddy, grab the JSX namespace from React!"

But of course before all these, you need to check if these two are installed in your project:

npm install --save react react-dom
npm install --save-dev typescript @types/react @types/react-dom

so the error you get is clearly because of your project's typing and not because of the way you're using the react icons!

Hope it helps❤
And if it does, please do like, share and leave me a comment.