Babel cannot parse coalescing operator in my React JSX

I tried adding babel support for ?? but it still cannot parse this for some reason.

I am using:

"@babel/core": "^7.24.0"
"typescript": "^5.4.2"
"webpack": "^4.44.1"
 "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",

I also tried installing and using: @babel/plugin-proposal-nullish-coalescing-operator

It cannot parse the following 2 lines when I compile my ReactJS app because it cannot parse ??:

const organization = company ?? university;
<MainLayout title={company.name ?? university.name}>

.bablerc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }],
    ["@babel/preset-react", { "development": true }]
  ],
  "plugins": [
    ["@babel/plugin-proposal-object-rest-spread"],
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-proposal-export-default-from"],
    ["@babel/plugin-transform-optional-chaining"],
    ["@babel/plugin-transform-nullish-coalescing-operator"]
  ]
}

tsconfig.json

"compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */
    "noEmit": true,
    "rootDir": "./",
    /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "target": "esnext",
    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "esnext",
    /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": [
      "es5",
      "es6",
      "dom",
      "ESNext"
    ],
    /* Specify library files to be included in the compilation. */
    "moduleResolution": "node",
    "allowJs": false,
    /* Allow javascript files to be compiled. */
    "jsx": "react",

InterviewContainer.tsx

render() {
        const {company, university} = this.props;
        if(!company || !university) return null

        const organization = company ?? university;

        return (
            <Main>
                <MainLayout title={company.name ?? university.name}>
                    <div>
                        <div id="ft-interview">
                            <div className="panel vertical-space">
                                <CompanyHeader className="ft-companyHeader" company={company}/>
                                <CompanyProfile className="ft-companyProfile" company={company}/>
                                <InterviewContentMain className="ft-interviewContentMain" company={company}/>
                            </div>
                        </div>
                    </div>
                </MainLayout>
            </Main>
        )
    }

Error (I get this when webpack uses tsconfig to transpile my webpack dev build)

ERROR in ./views/Interview/InterviewContainer.tsx 28:38
Module parse failed: Unexpected token (28:38)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.
|         if (!company || !university)
|             return null;
>         const organization = company ?? university;
|         return (React.createElement(Main, null,
|             React.createElement(MainLayout, { title: company.name ?? university.name },
 @ ./views/App.tsx 5:0-64 38:36-54 40:36-54
 @ ./index.tsx