title: Material UI Accordion Summary
body: <p>I have a very peculiar case to display Selected Item Count in my <code>Material UI - Accordion Summary</code>:
  Following Should be the Behavior:</p>
  <p><a href="https://i.stack.imgur.com/efhAZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/efhAZ.png" alt="enter image description here" /></a></p>
  <p>When a User click on the Header Checkbox it should select All the Item in that Panel and then shows the Count of those Items as <code>X Selected</code></p>
  <p>Right Now I am able to do the following :</p>
  <p><a href="https://i.stack.imgur.com/GpkEM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GpkEM.png" alt="enter image description here" /></a></p>
  <p>As You can see the Number of Items selected is showing on Each Panel But I only Want it to show in the Selected Panel.</p>
  <h2>Below is my Code for Above screen Shot:</h2>
  <pre><code>{unsubscribedEmployeeData ? Object.entries(unsubscribedEmployeeData).map(([name, value]) =&gt; {
              return (
                      &lt;Accordion TransitionProps={{ unmountOnExit: true }}&gt;
                        &lt;AccordionSummary
                          expandIcon={&lt;ExpandMoreIcon /&gt;}
                          aria-label=&quot;Expand&quot;
                          aria-controls=&quot;additional-actions1-content&quot;
                          id=&quot;additional-actions1-header&quot;
                        &gt;
                          &lt;EnhancedTableToolbar numSelected={selected.length} name={name} values={value} /&gt;
                        &lt;/AccordionSummary&gt;
                        &lt;AccordionDetails&gt;
                          &lt;Typography color=&quot;textSecondary&quot;&gt;
                            &lt;div className={classes.root}&gt;
                              &lt;Paper className={classes.paper}&gt;
                                &lt;TableContainer&gt;
                                  &lt;Table
                                    className={classes.table}
                                    aria-labelledby=&quot;tableTitle&quot;
                                    size={dense ? 'small' : 'medium'}
                                    aria-label=&quot;enhanced table&quot;
                                  &gt;
                                    &lt;TableBody&gt;
                                      {stableSort(value, getComparator(order, orderBy))
                                        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                                        .map((row, index) =&gt; {
                                          const isItemSelected = isSelectedID(row.id);
                                          const labelId = `enhanced-table-checkbox-${index}`;
                                        
                                          return (
                                            &lt;TableRow
                                              hover
                                              onClick={(event) =&gt; handleClick(event, row.first_name + &quot; &quot; + row.last_name, row.id)}
                                              role=&quot;checkbox&quot;
                                              aria-checked={isItemSelected}
                                              tabIndex={-1}
                                              key={row.id}
                                              selected={isItemSelected}
                                            &gt;
                                              &lt;TableCell padding=&quot;checkbox&quot;&gt;
                                                &lt;Checkbox
                                                  checked={isItemSelected}
                                                  inputProps={{ 'aria-labelledby': labelId }}
                                                /&gt;
                                              &lt;/TableCell&gt;
                                              &lt;TableCell  align=&quot;center&quot; component=&quot;th&quot; id={labelId} scope=&quot;row&quot; &gt;
                                                {row.first_name + &quot; &quot; + row.last_name}
                                              &lt;/TableCell&gt;
                                              &lt;TableCell align=&quot;center&quot;&gt;{row.email}&lt;/TableCell&gt;
  
                                            &lt;/TableRow&gt;
                                          );
                                        })}
                                    &lt;/TableBody&gt;
                                  &lt;/Table&gt;
                                &lt;/TableContainer&gt;
                              &lt;/Paper&gt;
                            &lt;/div&gt;
                          &lt;/Typography&gt;
                        &lt;/AccordionDetails&gt;
                      &lt;/Accordion&gt;
                  );
          }) : undefined}
  </code></pre>
  <h2>EnhancedTableToolbar</h2>
  <pre><code> const EnhancedTableToolbar = (props) =&gt; {
    const classes = useToolbarStyles();
    const { numSelected, name, values } = props;
  
    return (
      &lt;Toolbar
        className={clsx(classes.root)}
      &gt;
        {numSelected &gt; 0 ? (
          &lt;&gt;
            &lt;EnhancedTableHead
                classes={classes}
                numSelected={selected.length}
                onSelectAllClick={(event) =&gt; handleSelectAllClick(event,values)}
                rowCount={values.length}
                label={name}
            /&gt;
            &lt;Typography   component=&quot;div&quot;&gt;
              {numSelected} selected
            &lt;/Typography&gt;
          &lt;/&gt;
        ) : (
          &lt;EnhancedTableHead
                classes={classes}
                numSelected={selected.length}
                onSelectAllClick={(event) =&gt; handleSelectAllClick(event,values)}
                rowCount={values.length}
                label={name}
          /&gt;
        )}
      &lt;/Toolbar&gt;
    );
  };
  </code></pre>
  <h2>handleSelectAllClick</h2>
  <pre><code>const handleSelectAllClick = (event, val) =&gt; {
      if (event.target.checked) {
        const newSelectedsID = val.map((n) =&gt; n.id);
        const newSelecteds = val.map((n) =&gt; n.first_name + &quot; &quot; + n.last_name);
        console.log(newSelecteds);
        console.log(newSelectedsID);
        setSelectedID(newSelectedsID);
        setSelected(newSelecteds);
        return;
      }
      setSelected([]);
      setSelectedID([]);
  };
  </code></pre>
  <p>Please guide me through this. Thanks</p>