Upgarde to react 17 in rails with webpacker 5

Question

I was trying to upgrade react version on my rails 5 project using webpacker 5, I am using gem "react-rails", "2.4.4" and I tried to use the new JSX transform feature in react 17, but was getting some error

In my package.json I am using

    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
    "@babel/plugin-proposal-function-sent": "^7.12.1",
    "@babel/plugin-proposal-json-strings": "^7.12.1",
    "@babel/plugin-proposal-numeric-separator": "^7.12.1",
    "@babel/plugin-proposal-throw-expressions": "^7.12.1",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@babel/runtime-corejs2": "^7.12.1",
    "react_ujs": "^2.4.4",
    "webpack": "^5.0.0-rc.6",
    "webpack-cli": "^3.0.1",
    "@rails/webpacker": "^5.2.1",

This is the component I am trying to mount

import { Provider } from 'react-redux';

import store from './store/index';
import GardenView from './GardenPlan/containers/GardenView';

const GardenPlanApp = props => (
  <Provider store={store}>
    <GardenView
      garden={props.garden}
      garden_plants={props.garden_plants}
      my_garden={props.my_garden}
      isImperial={props.isImperial}
      isMobile={props.isMobile}
    />
  </Provider>
);

export default GardenPlanApp;

And I also configured my .babalrc file as per https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html, here is my .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": "> 1%"
        },
        "useBuiltIns": "usage",
        "corejs": 2,
        "forceAllTransforms": true
      }
    ],
    "@babel/react",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    [
      "transform-class-properties",
      {
        "spec": true
      }
    ]
  ]
}

How do I use react 17 with rails in correct way with new JSX transformation ?