ESLint running in terminal but doesn't pick up error - visual-studio-code

Question

I'm following a tutorial using create-react-app and configuring ESLint.
I already installed ESLint globally, I have a .eslintrc.json file in the root folder and .vscode/settings.json
Current problem:
After configuring, ESLint Output runs normally but didn't pick up any error from my code.
Ex: When I hover over .textContent, it supposed to have a suggestion to use .toHaveTextContent instead:
I tried restarting VSCode, uninstalling ESLint extension and installing it again but still - doesn't work and no error in the Output.
Screenshots & Code:
File tree:
ESLint Output:
.eslintrc.json
{
"plugins": [
"testing-library",
"jest-dom"
],
"extends": [
"react-app",
"react-app/jest",
"plugin:testing-library/react"
]
}
.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
},
}
package.json
{
"name": "color-button",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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-plugin-jest-dom": "^4.0.1",
"eslint-plugin-testing-library": "^5.5.0"
}
}

Answer 1

It turns out I haven't added "plugin:jest-dom/recommended" rule in my .eslintrc.json file.
That's why it didn't pick up error with jest-dom's syntax :)
Fixed this:
{
"plugins": [
"testing-library",
"jest-dom"
],
"extends": [
"react-app",
"react-app/jest",
"plugin:testing-library/react",
"plugin:jest-dom/recommended"
]
}