title: I don't understand why my accordion isn't collapsing or expanding
body: <p>I have a page with a few accordion items. Its info is based on a json file. During initial load of the page, everything works perfectly, but upon using the filter, the items are filtered correctly except it no longer collapses nor expands.</p>
  <pre><code>let ifFilter = false;
  var dataReturn = [], itemlist;`
  
  export default function EventPastData(data) {`
      
      data = Object.values(data.data.past);
  
      const [currentPage, setCurrentPage] = useState(1);
      const [itemsPerPage] = useState(5); //change this number to change how many items in each page
  
      const [expanded, setExpanded] = useState(false);
      const [year, setYear] = useState('');
  
  
      const handleOpen = (panel) =&gt; (e, isExpanded) =&gt; {
          setExpanded(isExpanded ? panel : false);
      };
      console.log(data);
      console.log(dataReturn)
  
      function populate(d) {
          itemlist = d.map((x, index) =&gt; {
              //console.log(index);
              return (
                  &lt;Accordion
                  key={index}
                  className={`${new Date(x.date).getFullYear()}`}
                  expanded={expanded === `panel${index}`}
                  onChange={handleOpen(`panel${index}`)}
                  &gt;
                      &lt;AccordionSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;
                          &lt;Avatar variant=&quot;rounded&quot;&gt;
                              &lt;img src={require(`../../img/${x.img}`)} alt={x.img} /&gt;
                          &lt;/Avatar&gt;
                          &lt;Paragraph text={x.title} size='1.3rem' /&gt;
                          &lt;Paragraph text={x.date} size='1.1rem' /&gt;
                      &lt;/AccordionSummary&gt;
                      &lt;AccordionDetails&gt;
                          &lt;Paragraph text={x.description} size='1.1rem' /&gt;
                          &lt;br /&gt;
                          &lt;Paragraph text={'Venue: ' + x.venue} size='1.1rem' /&gt;
                          &lt;Paragraph text={'Time: ' + x.time} size='1.1rem' /&gt;
                      &lt;/AccordionDetails&gt;
                  &lt;/Accordion&gt;
              )     
          });
      };
  
      const handleFilter = (event) =&gt; {
          setYear(event.target.value);
          dataReturn = [];
          for (let i = 0; i &lt; data.length; i++) {
              if (new Date(data[i].date).getFullYear() === event.target.value) {
                  dataReturn.push(data[i]);
              };
          };
          if (event.target.value !== '') {
              ifFilter = true;
              populate(dataReturn);
          } else {
              populate(data);
          };
      };
  
  
      if (ifFilter !== true) {
          populate(data);
      };
  </code></pre>
  <p>The page contents are then displayed using the following HTMl:</p>
  <pre><code>    return (
          &lt;div className='test'&gt;
              &lt;Container sx={{mx: 'auto'}}&gt;
                  &lt;div id='listAccordion'&gt;
                      {currentItems}
                  &lt;/div&gt;
                  &lt;Grid container direction=&quot;row&quot; justifyContent=&quot;center&quot; alignItems=&quot;center&quot; spacing={2}&gt;
                      &lt;Grid item sm={1}&gt;
                          &lt;FormControl sx={{ m: 1, minWidth: 80 }} color='secondary'&gt;
                              &lt;InputLabel id=&quot;demo-simple-select-autowidth-label&quot;&gt;Year&lt;/InputLabel&gt;
                              &lt;Select
                              labelId=&quot;demo-simple-select-autowidth-label&quot;
                              id=&quot;demo-simple-select-autowidth&quot;
                              value={year}
                              onChange={handleFilter}
                              autoWidth
                              label=&quot;Year&quot;
                              &gt;
                                  &lt;MenuItem value=&quot;&quot;&gt;
                                      &lt;em&gt;None&lt;/em&gt;
                                  &lt;/MenuItem&gt;
                                  &lt;MenuItem value={2019}&gt;2019&lt;/MenuItem&gt;
                                  &lt;MenuItem value={2020}&gt;2020&lt;/MenuItem&gt;
                                  &lt;MenuItem value={2021}&gt;2021&lt;/MenuItem&gt;
                                  &lt;MenuItem value={2022}&gt;2022&lt;/MenuItem&gt;
                              &lt;/Select&gt;
                          &lt;/FormControl&gt;
                      &lt;/Grid&gt;
                      &lt;Grid item sm={11}&gt;
                          &lt;Pages itemsPerPage={itemsPerPage} totalItems={itemlist.length} paginate={paginate}&gt;&lt;/Pages&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
                  &lt;p&gt;You're on page: &lt;strong&gt;{currentPage}&lt;/strong&gt;&lt;/p&gt;
              &lt;/Container&gt;
          &lt;/div&gt;
      )
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ZoXvT.png" rel="nofollow noreferrer">This is what the page looks like when the filter isn't used, accordion working</a></p>
  <p><a href="https://i.stack.imgur.com/XmLPV.png" rel="nofollow noreferrer">This is what the page looks like after filter is used, accordion no longer working</a></p>
  <p>I have no idea what the filter may be doing which is causing the accordion item to not work. If anyone has any ideas you could point me to, it would be greatly appreciated</p>