How to get jsx-a11y to work with eslint using typescript

Question

I have spent the best part of the day trying to figure out why it won't display eslint error messages against this code:

Example component:

import React, { FC } from 'react';
import { Comp } from './Comp';

const App: FC = () => (
  <div id="app">
    hello <Comp />
    <input type="text" value="something" />
  </div>
);

export default App;

.eslintrc.js config

module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    jest: true,
    mocha: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      modules: true,
      impliedStrict: true,
      experimentalObjectRestSpread: true,
    },
  },
  plugins: ['react', '@typescript-eslint', 'prettier', "jsx-a11y"],
  extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:import/typescript',
    'prettier',
    "plugin:jsx-a11y/recommended"
  ],
...
}

I have created a public git repo just for this usecase.

If you feel inclined to clone and try it for yourself:

https://github.com/inspiraller/eslint-prettier-typescript/blob/master/src/App.tsx

When loading in vscode there are NO eslint warnings or errors. When running this on the command line there are NO eslint errors:

npx eslint src/*

I would expect to see errors around the use of without adding any aria, or associated label or other accessible functionality.