Support for jsx isn't enabled, even though node package is whitelisted in webpack config

I am trying to get the package react-native-reanimated to compile correctly in my webpack application, however I keep running into errors like these:

ERROR in ./node_modules/react-native-reanimated/lib/createAnimatedComponent.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/aftrumpet/app/node_modules/react-native-reanimated/lib/createAnimatedComponent.js: Support for the experimental syntax 'jsx' isn't currently enabled (507:21):

  505 |                 default: { collapsable: false },
  506 |             });
> 507 |             return (<Component {...props} ref={this._setComponentRef} {...platformProps}/>);
      |                     ^
  508 |         }
  509 |     }
  510 |     AnimatedComponent.displayName = `AnimatedComponent(${Component.displayName || Component.name || 'Component'})`;

I know the solution to this is to not exclude the react-native-reanimated module from jsx compilation, however it is not working even though my webpack.config.js has it not excluded. Here is the webpack config:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!react-native-reanimated)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['babel-plugin-react-native-web'],
          },
        },
      },
    ],
  },
};

I think there's a possibility the webpack application might not be reading the config, however I did include it in my root directory so this should not be happening.

Here is my package.json if that helps as well:

{
  "name": "we_v2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/preset-env": "^7.18.2",
    "@babel/preset-react": "^7.17.12",
    "@hookform/resolvers": "^2.8.8",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "clsx": "^1.1.1",
    "highcharts": "^9.3.3",
    "highcharts-border-radius": "^0.0.4",
    "highcharts-react-official": "^3.1.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.27.0",
    "react-native-gesture-handler": "^2.4.2",
    "react-native-reanimated": "^2.8.0",
    "react-native-web": "^0.17.7",
    "react-navigation": "^4.4.4",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "sass": "^1.49.7",
    "web-vitals": "^2.1.4",
    "webpack": "^5.72.1",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "PORT=8000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}