Optional chaining failed after using this plugin?

[totszwai]

In my .babelrc I've already included the @babel/preset-env, which according to the Babel's documentation, already supports optional chaining (See: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)

But after using this, it looks like it broke the chaining? What do we need to do?

{
  "plugins": [
    "react-require",
    "@babel/plugin-syntax-jsx",
    "babel-plugin-styled-components"
  ],
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "sourceMaps": true,
  "inputSourceMap": true
}

[start:*components] Module parse failed: Unexpected token (100:48)
[start:*components] File was processed with these loaders:
[start:*components]  * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
[start:*components]  * ./node_modules/babel-loader/lib/index.js
[start:*components] You may need an additional loader to handle the result of these loaders.
[start:*components] | };
[start:*components] | export const getTypeOfEdgeNodes = (nodeId, nodes) => {
[start:*components] >   return nodes.find(node => node.id === nodeId)?.nodeType;
[start:*components] | };

Does the loading order of the plugins matter? We are trying to use it with single-spa.

const useBabelRCPlugin = require('@jackwilsdon/craco-use-babelrc');
const singleSpaApplicationPlugin = require('craco-plugin-single-spa-application');


    plugins: [
      {
        plugin: singleSpaApplicationPlugin,
        options: {
          orgName: 'blah',
          projectName: 'ui-stuff',
          entry: 'src/my-stuff.ts',
          orgPackagesAsExternal: false,
          reactPackagesAsExternal: true,
          externals: ['styled-components'],
          minimize: env === 'production'
        }
      },
      { plugin: useBabelRCPlugin }
    ],