How to add multiple colors to font Font Awesome icon?

I am trying to use Font Awesome icon to render icons with multiple colors with layers. Something like below. It has two layers, left layer is blue, right layer is red.

I know that I can achieve this with icon element like below code using --fa-primary-color and --fa-secondary-color.

 <i class="fad fa-list" style="--fa-primary-color: blue;--fa-secondary-color:  red;"></i>

However, it seems there is no way to do the same thing with React component. The React code is simply as below:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faList } from '@fortawesome/free-solid-svg-icons';

function MyListIcon() {
    return <FontAwesomeIcon icon={faList} className={styles.multipleColor} />;
};

css:

.multipleColor {
    --fa-primary-color: blue;
    --fa-secondary-color: red;
}

It turned out the it actually rendered an SVG element but not an icon element, and the colors are not applied at all. So, what is the correct way to do this with FontAwesomeIcon? Thanks in advance!