Octokit issue in React environment with typescript

Question

I am attempting to use octokit to facilitate GET requests and most importantly get proper type definitions for the responses back from the @octokit/openapi-types. This is what I've tried so far

import React from 'react';
import { Grid } from '@mui/material';
import { Octokit } from '@octokit/rest';
import { components } from '@octokit/openapi-types';
type ResponseEndpointResponseType = components['schemas']['root']['user_url'];
const octokit = new Octokit();

export const ProjectCardList: React.FC<{}> = () => {
  const [projects, setProjects] = React.useState([]);
  React.useEffect(async () => {
      /*
      fetch('https://api.github.com/users/mojombo/repos').then(async res => {
          const resultJSON: ResponseEndpointResponseType = await res.json();
          setProjects(resultJSON.filter(r => r!.owner!.login === 'mojombo'));
      })
      */
      const result = await octokit.request('GET /users/{owner}/repos', {owner: 'mojombo' });
      setProjects(result.filter(r => r.owner.login === 'mojombo'));
  }, []);
  React.useEffect(() => { console.log(projects) }, [projects]);
  return (
      <div style={{padding: '2em' }}>
      <Grid
        container
        spacing={6}
        justifyContent={"space-evenly"}
        sx={{overflowX: 'hidden'}}
      >
      
      </Grid>
      </div>
  )
}

export default ProjectCardList;

As the first step, I'm getting the following error

useIsFocusVisible.js:161 Uncaught Error: Module parse failed: Cannot use 'arguments' in class field initializer (40:24)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|     const NewOctokit = class extends this {
|       static #_ = (() => {
>         for (var _len = arguments.length, newPlugins = new Array(_len), _key = 0; _key < _len; _key++) {
|           newPlugins[_key] = arguments[_key];
|         }
    at ./node_modules/@octokit/core/dist-web/index.js (useIsFocusVisible.js:161:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@octokit/rest/dist-web/index.js (index.js:1981:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/projectCards/projectCards.tsx (navigationMenu.tsx:33:1)
    at options.factory (react refresh:6:1)

I have no idea what this means.

As a follow on step, I'm going to ask how to get a proper type from the following url response (which you can also see in the commented out fetch request):

https://api.github.com/users/mojombo/repos

Package.json

{
  "name": "my-site",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.0.4",
    "@mui/material": "^5.0.4",
    "@mui/x-date-pickers": "^5.0.0-beta.6",
    "@octokit/rest": "^20.0.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/lodash": "^4.14.195",
    "@types/react-router-dom": "^5.3.3",
    "eslint": "8.42.0",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.12.1",
    "react-scripts": "5.0.1",
    "typescript": "^5.1.3"
  },
  "scripts": {
    "predeploy": "yarn build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --fix . && echo 'Lint complete.'",
    "watch": "watch 'clear && npm run build' src"
  },
  "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"
    ]
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "gh-pages": "^6.0.0",
    "prettier": "^2.8.8",
    "serve": "^14.2.1",
    "tap-nirvana": "^1.1.0",
    "watch": "^1.0.2"
  }
}