Why doesn't my fontawesome icon render in my Next.js project?

I have a Next.js project where I am using fontawesome icons.

However, the icon does not show up on the web page. I even checked under inspect element and in the parent div and the icon element is not there.

Below is my _app.js file:

import '../styles/globals.css'

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

And below is my index.js file in the pages directory:

import React, { Fragment } from "react"
import Head from 'next/head'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import '../node_modules/@fortawesome/fontawesome-svg-core/styles.css'

export default function Home() {
  return (
    <Fragment>
      <FontAwesomeIcon icon="fa-brands fa-facebook-f" />
    </Fragment>
  )
}

Why isn't my icon rendering and how do I fix it? Thanks in advance.

You still need to import icons into your project. That's why there is nothing showing. This is what your index.js should look like if using the free brands svg icons:

import React, { Fragment } from 'react'
import Head from 'next/head'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebookF } from '@fortawesome/free-brands-svg-icons'

export default function Home() {
  return (
    <Fragment>
      <FontAwesomeIcon icon={faFacebookF} />
    </Fragment>
  )
}