I'm working on a React application where I want conditional rendering of FontAwesome icons, but at the moment it's not changing when it should.

I inspected elements and found that FontAwesome is commenting out the React component and replacing it with the svg of the icon, so when I go back to change the FontAwesome icon in React, it has no effect. Below is an example of this

<!-- Expected -->
<i class="fa fa-pause"></i>

<!-- Actual -->
<svg class="svg-inline--fa fa-pause fa-w-14" aria-hidden="true" focusable="false" data-prefix="fa" data-icon="pause" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg>...</svg>
<!-- <i class="fa fa-pause"></i> Font Awesome fontawesome.com -->

I know the cause of this probably has to do with a webpack change I recently made (moved the less loader into the webpack.rules.js instead of adding it in webpack.renderer.config.js and changed style-loader to MiniCssExtractPlugin.loader), but I'm not sure what exactly is causing it or how to fix it. I've included the fontawesome import and webpack below:

import '@fortawesome/fontawesome-free/js/all.js';

// webpack.rules.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: {amd: false},
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
  {
    test: /\.tsx?$/,
    exclude: /(node_modules|\.webpack)/,
    use: {
      loader: 'ts-loader',
      options: {
        transpileOnly: true,
      },
    },
  },
  {
    test: /\.less$/,
    use: [MiniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'less-loader'}],
    exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(config|variables|overrides)$/],
  },
]