two column accordion

Question

I am using chakra ui and react .

I have problem that I want to use two column accordion . and when I am exapnding the one acordion another one is affected as well .

there is no hints from docs .

here is my code ->

<Accordion allowMultiple>
                    <Flex {...styles.flex} wrap="wrap" columnGap="8%">
                        {arr.map((item, index) => (
                            <AccordionItem flex="46%" borderTop="0" borderBottom="1px solid black">
                                <h2 style={{lineHeight: '25px', padding: '30px 30px 30px 0'}}>
                                    <AccordionButton>
                                        <Box as="span" flex="1" textAlign="left">
                                            Section {index + 1} title
                                        </Box>
                                        <AccordionIcon />
                                    </AccordionButton>
                                </h2>
                                <AccordionPanel pb={4}>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                                    enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                    nisi ut aliquip ex ea commodo consequat.
                                </AccordionPanel>
                            </AccordionItem>
                        ))}
                    </Flex>
                </Accordion>

if someone had same issue , how did you fix that? many thanks in advance.