Salve o/
Então, de vez em quando a gente tropessa nesses erros, né? Bora lá entender o que aconteceu.
O ESLint é uma ferramenta muito útil que nos ajuda a seguir boas práticas de codificação, identificando potenciais problemas no nosso código. Nesse caso, ele acusou que o useState não estava definido. Isso porque você estava tentando usar uma função que o JavaScript não conhecia.
Aí que entra o import. No JavaScript ES6+, quando queremos usar funções ou variáveis que estão definidas em outros arquivos, precisamos importá-las no arquivo onde queremos usá-las. Isso vale para os Hooks do React, como o useState e o useEffect, que estão definidos na biblioteca do React.
Então, quando você colocou import React, { useEffect, useState } from "react";
no início do seu arquivo, você basicamente disse ao JavaScript: "Ei, vou usar algumas coisas que estão definidas no pacote 'react', então por favor, traga elas para cá". E o JavaScript, muito prestativo, trouxe pra você o React, o useEffect e o useState.
Pra facilitar, pense que é como se você estivesse numa cozinha preparando um bolo e precisa de ingredientes que estão na despensa. Você não pode simplesmente começar a bater o bolo com ovos, farinha e açúcar se você não foi lá na despensa buscar esses ingredientes antes, né? O import é a mesma coisa, mas para o JavaScript.
Então, toda vez que quiser usar o useState, useEffect ou qualquer outro Hook do React, lembre-se de importá-los no início do arquivo. Isso deve resolver o problema.
Espero ter ajudado! Qualquer outra dúvida, é só mandar.
Vida longa e próspera!