In addition to saving the clicked element into state so the Popover component has an element ref it needs to also store in state which specific row's participants to render into the popover. Currently the code is using a singular boolean value for all the popovers. Use the row.id to open a specific popover.

Don't forget to add the "anchor" state to the dependency array so the popover gets the latest state.

function Display() {
  const { menus } = JsonData;

  const [anchorId, setAnchorId] = useState(null);
  const [anchorEl, setAnchorEl] = useState(null);

  const openPopover = id => (event) => {
    setAnchorId(id);
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorId(null);
    setAnchorEl(null);
  };

  const data = useMemo(
    () => [
      {
        Header: "Id",
        accessor: (row) => row.id
      },
      {
        Header: "Invited",
        id: "invited",
        accessor: (row) => row.invited,
        Cell: (props) => (
          <div>
            {props.value.map(({ name }) => name).join(", ")}
            <InfoIcon onClick={openPopover(props.row.id)} />
            <Popover
              open={anchorId === props.row.id}
              onClose={handleClose}
              anchorEl={anchorEl}
              anchorOrigin={{
                vertical: "top",
                horizontal: "left"
              }}
              transformOrigin={{
                vertical: "bottom",
                horizontal: "right"
              }}
            >
              <Typography variant="h6">
                {props.value.map(({ name, location }) => (
                  <div key={name}>
                    <p>{name}</p>
                    <p>Location: {location}</p>
                  </div>
                ))}
              </Typography>
            </Popover>
          </div>
        )
      },
      {
        Header: "Title",
        accessor: (row) => ({ title: row.title, id: row.id }),
        Cell: ({ value }) => (
          <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link>
        )
      }
    ],
    [anchorEl, anchorId]
  );

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "invited" },
      { desc: false, id: "title" }
    ]
  };

  return (
    <Table
      data={menus}
      columns={data}
      initialState={initialState}
      withCellBorder
      withRowBorder
      withSorting
      withPagination
    />
  );
}