React default import errors in NextJS project with TypeScript, esModuleInterop=true

My TypeScript config in my Next.js app is not happy with this trivial import:

import React from 'react'

Granted, Next.js imports React by default into global, but that leads to another warning. Adding the import seems clearer, so assume I'm stubborn on this point.

The error:

TS1259: Module '"~/my-project/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag  index.d.ts(65, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

But I already have esModuleInterop: true:

tsconfig.json

  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,  //  <==================== Right here
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "typings/**/*.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

I expected the error to take into account my config. So why am I getting this error?

Edit:

import * as React from 'react'

doesn't error, so I can move forward. This answer provides details. This still leaves the question why default import won't work (which seems to be the preferred in the community).