Como resolver o erro: 'React' must be in scope when using JSX react/react-in-jsx-scope

Mesmo colocando a configuração indicada no vídeo 2, quando eu comecei a criar o componente de Inicio, continua dando o erro 'React' must be in scope when using JSX react/react-in-jsx-scope no JSX. Pra resolver isso, eu tive que importar o react, mesmo com a regra "react/react-in-jsx-scope": "off", presente no arquivo ESLint. Não sei se tem a ver com atualizações do TypeScript ou se é outra coisa. Segue o código do meu ESLint e do meu componente Inicio:

eslintrc.json:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "indent": [
      "error",
      2
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

index.js do Inicio:

import React from 'react';
import cardapio from 'pages/Cardapio/Itens/itens.json';

export default function Inicio() {
    return (
        <section>
            <h3>Recomendações da cozinha</h3>
            <div></div>
        </section>
    )
}

Agradeço se alguém puder me ajudar com isso :)