I met a console warning:

next-dev.js:28 Warning: React does not recognize the `isOpen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isopen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

The relating code is this:

...
const IconContainer = styled(TriangleIcon)<{ isOpen: boolean }>`
	position: absolute;
	right: 0;
	top: 40%;
	width: 16px;
	height: 16px;
	transform: ${({ isOpen }) => (isOpen ? "rotate(90deg)" : "rotate(0deg)")};
`
...
export const MobileAccordionSection: React.FC<Props> = ({
	title,
	children,
	hideOnDesktop,
	padding,
}) => {
...
	return (
		<Container hideOnDesktop={hideOnDesktop} padding={padding}>
			<TitleContainer onClick={toggleOpen}>
				<Title>{title} </Title>
				{isMobile && <IconContainer isOpen={isOpen} />}
			</TitleContainer>
			{isOpen && children}
		</Container>
	)
}

export default MobileAccordionSection

The problem is because of passing isOpen to `<IconContainer

Change the prop name to $isOpen solved the problem:

...
	const IconContainer = styled(TriangleIcon)<{ $isOpen: boolean }>`
		position: absolute;
		right: 0;
		top: 40%;
		width: 16px;
		height: 16px;
		transform: ${(p) => (p.$isOpen ? "rotate(90deg)" : "rotate(0deg)")};
	`
...
	return (
		<Container hideOnDesktop={hideOnDesktop} padding={padding}>
			<TitleContainer onClick={toggleOpen}>
				<Title>{title} </Title>
				{isMobile && <IconContainer $isOpen={isOpen} />}
			</TitleContainer>
			{isOpen && children}
		</Container>
	)
...