Font Awesome icons on React Js Project - reactjs

Question

According to Font Awesome documentation, I followed this example below but didn't get any result. I used font awesome a lot of time on my html project in the past. But this is for the first time I am using it on my React Application. How can I get the icons from font awesome on my react application?
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export const Beverage = () => (
<div>
<FontAwesomeIcon icon="check-square" />
Your <FontAwesomeIcon icon="coffee" /> is hot and ready!
</div>
)
There is my package.json dependencies.
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.2",
"#fortawesome/free-solid-svg-icons": "^6.1.2",
"#fortawesome/react-fontawesome": "^0.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"formik": "^2.2.9",
"jquery": "^3.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1",
"web-vitals": "^2.1.4"
}

Answer 1

https://github.com/FortAwesome/react-fontawesome
Commands : install fontawesome & react-fontawesome
$ npm i --save #fortawesome/fontawesome
$ npm i --save #fortawesome/react-fontawesome
$ npm i --save #fortawesome/fontawesome-free-solid
$ npm i --save #fortawesome/fontawesome-free-regular
$ npm i --save #fortawesome/fontawesome-svg-core
then in your component app.
import React, { Component } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/fontawesome-free-solid'
export const Beverage = () => (
<div>
Your <FontAwesomeIcon icon={faCoffee} />is hot and ready!
</div>
)