Unexpected token when linting shorthand react fragments <> (eslint/babel)

Question

I am currently upgrading some very old ESLint and Babel packages and ESLint has started complaining about my shorthand React Fragments and I'm not sure why?

When using <React.Fragment> I get an error saying it prefers shorthand (Which is what I want) and can quickfix into shorthand fragments <>. But then I still receive the below error.

I think I may have some missing config, or dependency, or maybe something is just not be set up correctly?

It's probably also worth mentioning that my code compiles correctly and still works even with the linting error.

The ESLint Error:

Parsing error: Unexpected token

  52 |         return (
  53 |             <div>
> 54 |                 <>React shorthand fragment doesn't seem to work</>
     |                  ^
  55 |                 <Rest of code/>
  56 |             </div>
  57 |         );eslint

My Babel/ESLint Packages:

        "@babel/cli": "7.11.6",
        "@babel/core": "7.11.6",
        "@babel/node": "7.10.5",
        "@babel/plugin-proposal-class-properties": "7.10.4",
        "@babel/plugin-proposal-export-default-from": "7.10.4",
        "@babel/plugin-transform-react-jsx": "7.10.4",
        "@babel/preset-env": "7.11.5",
        "@babel/preset-react": "7.10.4",
        "@babel/runtime": "7.11.2",
        "babel-eslint": "8.2.6",
        "babel-jest": "20.0.3",
        "babel-loader": "8.1.0",
        "babel-plugin-transform-react-constant-elements": "6.23.0",
        "babel-plugin-transform-react-remove-prop-types": "0.4.6",
        "babel-polyfill": "6.23.0",
        "babel-preset-env": "1.6.0",
        "babel-preset-stage-1": "6.24.1",

        "eslint": "7.10.0",
        "eslint-config-airbnb": "18.2.0",
        "eslint-config-prettier": "2.10.0",
        "eslint-plugin-import": "2.22.1",
        "eslint-plugin-jsx-a11y": "6.3.1",
        "eslint-plugin-react": "7.21.3",
        "eslint-watch": "3.1.2",

My ESLint Config:

{
    "env": {
        "es6": true,
        "browser": true,
        "node": true,
        "jquery": true,
        "jest": true
    },
    "extends": ["plugin:react/recommended", "airbnb", "prettier", "prettier/react"],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": ["react"],
    "rules": {
        "indent": ["error", 4],
        "semi": "error",
        "arrow-body-style": 0,
        "no-console": ["error", { "allow": ["warn", "error"] }],
        "quotes": ["error", "single", { "avoidEscape": true }],
        "no-multi-spaces": "error",
        "react/jsx-indent": 0,
        "react/jsx-indent-props": 0,
        "react/jsx-filename-extension": 0
    },
    "globals": {}
}

My Babel Config:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-transform-react-jsx"
    ]
}