@babel/plugin-proposal-class-properties not being picked up when compiling

Question

I am trying to incorporate React Native Calendars into my React webapp.

I have run

npm install --save react-native-calendars

and then added the Calendar component to a page (this is then rendered by App.js)

import React from 'react';
import {Calendar} from 'react-native-calendars';

class CalendarPage extends React.Component{
    render(){
        return (
            <div>
                <h1>This is the calendar</h1>
                <Calendar />
            </div>
        )
    }
}

export default CalendarPage;

When I run npm start (or save the file when the server is running), I get the error

SyntaxError: <filepath hidden>\node_modules\react-native-calendars\src\agenda\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (28:22):

  26 |  */
  27 | export default class AgendaView extends Component {
> 28 |   static displayName = 'Agenda';
     |                      ^
  29 | 
  30 |   static propTypes = {
  31 |     /** Specify theme properties to override specific styles for calendar parts. Default = {} */

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

I have done some Googling and the most common answer seems to be to run npm install @babel/plugin-proposal-class-properties (which I have done), and then add

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

to the package.json file., however this has not solved my problem.

I found some more answers which talk about using the .babelrc file. My project didn't have one initially (it was created through create-react-app) so I created one and added

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

as suggested here but that also didn't work.

I'm now completely stumped...

My Question: Is it something to do with differing versions? I get so tangled up in dependency land that I now have no idea what is going on.

---

Below is my full package.json file - I haven't touched it except to add the babel object

{
  "name": "<redacted>",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native-calendars": "^1.265.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }
}