I don't understand why my accordion isn't collapsing or expanding

Question

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.

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) => (e, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
    };
    console.log(data);
    console.log(dataReturn)

    function populate(d) {
        itemlist = d.map((x, index) => {
            //console.log(index);
            return (
                <Accordion
                key={index}
                className={`${new Date(x.date).getFullYear()}`}
                expanded={expanded === `panel${index}`}
                onChange={handleOpen(`panel${index}`)}
                >
                    <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                        <Avatar variant="rounded">
                            <img src={require(`../../img/${x.img}`)} alt={x.img} />
                        </Avatar>
                        <Paragraph text={x.title} size='1.3rem' />
                        <Paragraph text={x.date} size='1.1rem' />
                    </AccordionSummary>
                    <AccordionDetails>
                        <Paragraph text={x.description} size='1.1rem' />
                        <br />
                        <Paragraph text={'Venue: ' + x.venue} size='1.1rem' />
                        <Paragraph text={'Time: ' + x.time} size='1.1rem' />
                    </AccordionDetails>
                </Accordion>
            )     
        });
    };

    const handleFilter = (event) => {
        setYear(event.target.value);
        dataReturn = [];
        for (let i = 0; i < 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);
    };

The page contents are then displayed using the following HTMl:

    return (
        <div className='test'>
            <Container sx={{mx: 'auto'}}>
                <div id='listAccordion'>
                    {currentItems}
                </div>
                <Grid container direction="row" justifyContent="center" alignItems="center" spacing={2}>
                    <Grid item sm={1}>
                        <FormControl sx={{ m: 1, minWidth: 80 }} color='secondary'>
                            <InputLabel id="demo-simple-select-autowidth-label">Year</InputLabel>
                            <Select
                            labelId="demo-simple-select-autowidth-label"
                            id="demo-simple-select-autowidth"
                            value={year}
                            onChange={handleFilter}
                            autoWidth
                            label="Year"
                            >
                                <MenuItem value="">
                                    <em>None</em>
                                </MenuItem>
                                <MenuItem value={2019}>2019</MenuItem>
                                <MenuItem value={2020}>2020</MenuItem>
                                <MenuItem value={2021}>2021</MenuItem>
                                <MenuItem value={2022}>2022</MenuItem>
                            </Select>
                        </FormControl>
                    </Grid>
                    <Grid item sm={11}>
                        <Pages itemsPerPage={itemsPerPage} totalItems={itemlist.length} paginate={paginate}></Pages>
                    </Grid>
                </Grid>
                <p>You're on page: <strong>{currentPage}</strong></p>
            </Container>
        </div>
    )

This is what the page looks like when the filter isn't used, accordion working

This is what the page looks like after filter is used, accordion no longer working

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

Answer 1

This is incorrect. This will call the handleOpen on component render.

onChange={handleOpen(`panel${index}`)}

It should be an arrow function like so:

onChange={() => handleOpen(`panel${index}`)}