Hosting Font Awesome Pro icons locally - Duotone both colors not showing

Question

I cannot get both colors of my duotone icon to show up. I have Font Awesome 6.3 pro in my project. I downloaded the entire 'fontawesome-pro-6.3.0-web' folder and tossed it in my assets folder. Then I am importing it into the main.tsx file, I am using Vite. Imports look like this:

import './assets/fonts/fontawesome-pro-6.3.0-web/js/all.min';
import './assets/fonts/fontawesome-pro-6.3.0-web/scss/fontawesome.scss';

And then I am using the icon in my component like this:

<div>
    Hello {auth.name}{' '}
    <FontAwesomeIcon icon={['fad', 'gear']} className={'settings'} size={'3x'} />
    <i className={'fad fa-gear settings'}></i>
</div>

And in my package.json, I have the following packages as dependencies:

    "@fortawesome/fontawesome-svg-core": "^6.1.2",
    "@fortawesome/free-regular-svg-icons": "^6.1.2",
    "@fortawesome/free-solid-svg-icons": "^6.1.2",
    "@fortawesome/react-fontawesome": "^0.2.0",

Using both the FontAwesomeIcon tag and the i tag, it looks like this:

I even tried throwing this in my CSS to copy the CSS I was seeing at the Font Awesome site:

.settings {
    --fa-primary-color: #1e3050;
    --fa-secondary-color: #1e3050;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.4;
}

And here is the actual gear icon from the FA site: https://fontawesome.com/icons/gear?f=classic&s=duotone&sc=%231E3050

I should add what I am seeing in my console as well.

Clicking the fa-secondary path shows this:

And clicking the fa-primary path shows this: