Getting error on React JS while using fontawesome 5 Error: Could not find icon ObjecticonName: “faHeart”prefix: “fas”

I am trying to add fontawesome icon on my react js project but getting an error.

npm version: 8.1.4
node version: 17.2.0

├─┬ @fortawesome/[email protected]
│ └── [email protected] deduped
├─┬ @testing-library/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

I want to add two heart icons on my project. One is solid and one is regular. The code is for the heart icons are:

<i class="far fa-heart"></i>
<i class="fas fa-heart"></i>

On my react.js project, a class component I have declared named Like, and the code is shown below:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeart } from '@fortawesome/free-regular-svg-icons';

class Like extends React.Component {
  render() {
    return <FontAwesomeIcon icon={['fas', 'faHeart']}></FontAwesomeIcon>;
  }
}

export default Like;

I get this error: Could not find icon {prefix: 'fas', iconName: 'faHeart'}

If I use return <FontAwesomeIcon icon={faHeart}></FontAwesomeIcon>; then it solved but I need to add the two icon ones prefix is fas and ones is fas.

How can I do that? Please help me. I am new to React.js.