How do I attach an event listener to the "max" Avatar in Mui's AvatarGroup?

Question

I am trying to attach an event listener to the "max" Avatar specifically in the AvatarGroup, I know I can style the element but don't have access to the element to add an onClick. Here is the code snippet -

import * as React from "react";
import Avatar from "@mui/material/Avatar";
import AvatarGroup from "@mui/material/AvatarGroup";

export default function GroupAvatars() {
  const names = [
    "Remy Sharp",
    "Travis Howard",
    "Cindy Baker",
    "Agnes Walker",
    "Trevor Henderson"
  ];
  return (
    <AvatarGroup onClick={(e) => console.log(e.currentTarget)} max={4}>
      {names.map((name, i) => {
        return <Avatar alt={name} src="/static/images/avatar/1.jpg" />;
      })}
    </AvatarGroup>
  );
}

And here is the codesandbox link https://codesandbox.io/s/fervent-curie-m43vvs?file=/src/App.js

Answer 1

It is possible to access the outerText of the event target, so in this case can add a check to the AvatarGroup onClick function so onClick = ((e) => { if(e.target.outerText.includes('+')) doSomethingAppropriate })