VSCode: Eslint of JavaScript files: I see a little linting occurring, but not not what I would expect

I have vscode 1.46.1 installed on win 10, and I am using it to develop node/react apps in wsl2

So I see some linting in my open editors and presented in the "Problems" panel, but it's not the amount of linting I would expect. It's missing some obvious things (lack of imports for one)

As a vscode noob and even an eslint noob, I'm not sure what I am doing wrong...

If I start with this file:

import React fro "react";
import "./App.css";

export default function App() {
  const [title] = useState("Let the countdown begin");

  return (
    <div className="app">
      <h2>{title}</h2>
    </div>
  );
}

I would expect it to flag the first line, that is the import line with the fro typo and it does.

But once that first line is fixed, I'd expect it to mention how 'useState' is not defined. And that it misses.

But running eslint in the terminal finds it of course

I have Dirk Baeumer's ESLint extension v2.1.5 installed into VScode and WSL:Ubuntu

There are other potential eslint issues in this file, the double quotes for instance.

So, should vscode eslint be catching the lack of definition of useState and the double quotes?

How do I get it to do that?