• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

Repro

{
  "rules": {
    "no-misused-promises": ["error"]
  }
}

			<button
				type="button"
				onClick={async () => {
					await doSomethingAsync();
				}}
			>
				action
			</button>

or

			<button type="button" onClick={doSomethingAsync}>
				action
			</button>

Expected Result

No linting error.

Actual Result

A linting error is being reported:

src/app/App.tsx
  129:13  error  Promise-returning function provided to attribute where a void return was expected  @typescript-eslint/no-misused-promises

One way to avoid this error would be to wrap the callback's content in an async IIFE:

			<button
				type="button"
				onClick={() => {
					(async () => {
						await doSomethingAsync();
					})();
				}}
			>
				action
			</button>

But that's not really practical when the callback is an existing function (like the 2nd example above).

Additional Info

I guess this new behavior is kind of expected, but it's probably gonna breaks linting on a lot of React projects (including ours, which has now over 100 erros following this update). I'll welcome any suggestion as to how to address it without simply disabling the rule (and risk missing some potential bugs that were detected before).

Versions