Cannot find module or its corresponding type declarations when importing font awesome pro icons

I'm currently working on a React TypeScript project where I initially used Font Awesome free icons. However, I've realized the need to improve the aesthetics by incorporating Font Awesome Pro icons. Transitioning to Font Awesome Pro might not be as straightforward as I initially thought.

I've set up Font Awesome Pro following the documentation provided here: https://docs.fontawesome.com/web/setup/packages

Here are the steps I followed:

1. Created a Kit Package:

   Icons: pro
   Technology: SVG
   Subset: Auto-subsetting
   Styles: All styles
   Features: Enable NPM download and Enable compatibility with older versions
   

2. Created a .npmrc file in the folder where package.json exists.

.nmprc File Contents:

@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

3. Installed the kit package:

npm install --save @awesome.me/kit-KIT_CODE@latest

4. Installed below packages.

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @awesome.me/kit-KIT_CODE

npm i --save @fortawesome/react-fontawesome@latest

5. Attempted to import icons to a React component using the following code:

   import { faHouse } from '@awesome.me/kit-KIT_CODE/icons/classic/solid'
   

However, I'm encountering an error stating: "Module '@awesome.me/kit-code/icons/classic/solid/' or its corresponding type declarations cannot be found.

Add "moduleResolution": "bundler" within the compilerOptions object in the tsconfig.json file like below.

{
  "compilerOptions": {
    "moduleResolution": "bundler"
  },
}

It's disappointing that this isn't mentioned in any Font Awesome documentation.