'REACT- Popover doesn't display my json content

In menu/ the name of my invited people are not diplayed there is only the InfoIcon in the Cell. I want to create a Popover, when you click on the InfoIcon, you get all the info of the invited people(name and location).

export default function Display() {
  const { dishes } = JsonData;
  const [anchor, setAnchor] = useState(null);
  const openPopover = (event) => {
    setAnchor(event.currentTarget);
  };

  const data = useMemo(
    () => [
     ...
      {
        //Problem: participants not displayed and click not working
        Header: "Invited",
        id: "invited",
        accessor: (row) => row.invited.map(({ name }) => name).join(", "),
        Cell: (props) => (
          <div>
            <InfoIcon />
            <Popover
              open={Boolean(anchor)}
              anchorEl={anchor}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "bottom",
                horizontal: "right"
              }}
            >
              <Typography variant="h1">{props.participants}</Typography>
            </Popover>
          </div>
        )
      },
    ],
    []
  );

  return (
    <Table
      data={dishes}
      columns={data}         
    />
  );
}

Here is my code



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source