Why am I getting an ESLint error for async function with Promise return?

I have a Next.js application where I am defining an async function with Promise return and using it as an event handler for a HTML anchor element. However, when I try to run my code, ESLint is throwing the following error:

> "Promise-returning function provided to variable where a void return was expected.(@typescript-eslint/no-misused-promises)"

Here's my code:

const { data: users, mutate: mutateUsers } = useSWR(
{ url: endpoints.users(), args: { id: userId || "" } },
({ args }) => getUsers(args.userId || ""));

const { data: myData, mutate: mutateData }   = useSWR(
    { url: endpoints.data(), args: { id: id || "" } },
    ({ args }) => getData(args.id || ""));`

The ESLint error is being triggered by the use of the async keyword in the updateData function that is defined as a MouseEventHandler.

 const updateData: MouseEventHandler<HTMLAnchorElement> = 
      async (e) => {
          e.preventDefault();
          await mutateUsers();        
          await mutateData();    
       };

And here's the HTML code that calls the updateData function:

<a className="alert-link" href="#" onClick={ updateData }>
Update
<myButton name=""/>
</a>`

I am not sure why ESLint is throwing this error and how to fix it. Can anyone suggest a solution to this problem? Thank you in advance for any help.

I have tried this solution:

const updateData: MouseEventHandler<HTMLAnchorElement> = (e) => {
   (async => { e.preventDefault();
   await mutateUsers();
   await mutateData();
 })
};

<a className="alert-link" href="#" onClick={ updateData }> Update <myButton name=""/> </a>

but It doesn't work

Passing an async function (or any Promise-returning) function as a callback to a function that ignores the return value of the callback (i.e. expecting a callback that returns void) is a problem, because that means the function will invoke the callback and not handle the promise. In particular, it will ignore if the returned promise rejects, which will lead to a global unhandled promise rejection error which could crash a nodejs app.

Admittedly, this is not a problem just for promise-returning functions, it's the same problem when you pass a callback that throws a synchronous exception. Would the function know to handle the error?¹ Where would the exception propagate to? (It's actually fine if the callback was called immediately, it could just bubble back up to the caller).

However, this is generally not a problem for event handlers in the browser. For one, it doesn't crash a web application. But mainly, it's because event handlers are expected not to have their errors handled, whether they be synchronous or asynchronous². If the programmer cared³, they would have handled the error inside the async function implementation, and would return a promise that would never reject.
So you can basically safely ignore the linter here. Just suppress the error. As an alternative, you can use the void operator to explicitly ignore the promise:

const updateData: MouseEventHandler<HTMLAnchorElement> = (e) => {
  void (async => {
//^^^^
    e.preventDefault();
    await mutateUsers();
    await mutateData();
  })();
//  ^^ don't forget to call the IIAFE
};
<button onClick={ updateData }>

or

const updateData = async (e) => {
  e.preventDefault();
  await mutateUsers();
  await mutateData();
};
<button onClick={ e => void updateData(e) }>

_{1: And we don't know. We (and the linter) cannot really know, since the TypeScript type system fails to model exceptions. The main difference to when a promise is ignored that we do know, and that's why this rule can exist.
2: Actually, asynchronous functions are expected to be more error-prone since they usually do IO which may fail, while synchronous event handlers rarely throw.
3: And they should. You should.}