Accordion has annoying area that I don't know how to remove

[tidal temple]

I can't get rid of this upper and extra area of the top accordion item. When I use variant filled, this extra area is only on the top item. If I use variant separated, the extra upper area is present on every item.

Markup :

    <Center>
        <Accordion variant="contained" transitionDuration={0} classNames={classes}
                   className={classes.root}>
            {keysOf(problemList.value).map((key, index) => (
                    <Accordion.Item value={problemList.value[key]?.title}>
                        <Accordion.Control>{'#' + problemList.value[key].id + " " + problemList.value[key]?.title}</Accordion.Control>
                        <Accordion.Panel>
                            <div dangerouslySetInnerHTML={{__html: problemList.value[key]?.content}}></div>
                        </Accordion.Panel>
                    </Accordion.Item>
                )
            )}
        </Accordion>
    </Center>

You can see a small purple shadow (slightly different than the background) at the top in the image

[upbeat stratus]

could you send a code sandbox?

it's likely some padding or margin somewhere

[tidal temple]

Yes, maybe, I will review my paddings / margins, and setup a sandbox if I can't find anything

[upbeat stratus]

the most reliable method i find is to use inspect element