Next lint not working on files anywhere other than the ones inside the pages folder

Question

I have a FRESHLY installed NextJS app with TypeScript. I am using Next V12, when I run yarn lint, it runs next lint and shows no errors.

And now when I add an extra rule in the .eslintrc file like "no-unused-vars": 2 (it means to show an error when there's an un-used variable), and add an un-used variable on purpose in my index.tsx file inside the pages folder so that I can test the linting, it works as expected.

But when I add another folder called hooks and add an index.tsx file with unused variables in it, it doesn't capture the unused variable error in hooks folder, only captures the ones inside pages folder.

My .eslintrc file looks like this -

{
    "extends": "next/core-web-vitals",
    "rules": {
        "no-unused-vars": 2
    }
}

If anyone faced this issue before and knows what I'm doing wrong, please suggest.