React-Bootstrap - CRA - Failed to compile - reactjs

Question

When I install react-bootstrap in my CRA react app, and try to import any component such as:
import Form from "react-bootstrap";
I get this error:
Failed to compile.
./node_modules/react-bootstrap/esm/SplitButton.js
Module parse failed: Unexpected token (101:2)
You may need an appropriate loader to handle this file type.
| renderMenuOnMount,
| rootCloseEvent,
| ...props
| }, ref) => /*#__PURE__*/_jsxs(Dropdown, {
| ref: ref,
My package.json looks like this:
{
"name": "component-3",
"version": "0.1.1",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.23.0",
"bootstrap": "^5.1.3",
"dotenv": "^10.0.0",
"firebase": "^8.10.0",
"firebase-admin": "^9.12.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.2",
"react-color-extractor": "^1.1.2",
"react-dom": "^17.0.2",
"react-firebase-hooks": "^3.0.4",
"react-google-button": "^0.7.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^1.1.5",
"react-select": "^5.2.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "set NODE_ENV=dev && CHOKIDAR_USEPOLLING=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I want to use components such as Form in my app. I have used react-bootstrap with CRA before with no issues.
I have seen similar posts but none with this exact issue.
Any idea what might be causing this?