Split an array returning many object into 7 objects each across accordion panels

Question

I am making an array that has 30 objects and I don't want to display the whole 30 objects on the website, so I want to split these into 7 objects per accordion panel but I am not getting the right logic to do so. What I have tried is using a slice method on the array but because of the way chakra-ui accordion displays data I am confused on how to render it. I will share my code for better context,

['Week 1', 'Week 2', 'Week 3', 'Week 4'].map((week, index) => (
                <>
                    <Box key={week}>
                        <Accordion allowToggle>
                            <AccordionItem border={'none'} my="20px">
                                <h2>
                                    <AccordionButton
                                    p={'16px'}
                                    borderRadius={'12px'}
                                    bgColor={'#FEE1C4'}
                                    _hover={{ bgColor: '#FEE1C4' }}
                                    >
                                        <Box
                                        as="span"
                                        flex="1"
                                        textAlign="left"
                                        color="#000"
                                        fontSize={'14px'}
                                        fontWeight={700}
                                        >
                                            {week}
                                        </Box>
                                        <AccordionIcon />
                                    </AccordionButton>
                                </h2>
                                <AccordionPanel  py={'24px'} px="30px">
                                    {
                                        Array(30)
                                        .slice(index, index + 7)
                                        .fill(0)
                                        .map((item, idx) => {
                                            const tomorrow = new Date(currentDate);
                                            tomorrow.setDate(currentDate.getDate() + idx + 1);
                            
                                            const formattedDate = tomorrow.toLocaleDateString('en-US', {
                                            month: 'long',
                                            day: 'numeric',
                                            });
                            
                                            const dayOfWeek = tomorrow.toLocaleDateString('en-US', {
                                            weekday: 'long',
                                            });
                            
                                            return (
                                            <Box
                                                key={idx}
                                                overflowX={'scroll'}
                                                sx={{
                                                '::-webkit-scrollbar': {
                                                    display: 'none',
                                                },
                                                }}
                                                maxW={'1420px'}
                                                w={'1420px'}
                                                my={'25px'}
                                                mx="auto"
                                            >
                                                <Flex gap={'15px'} width={(10 * 270).toString() + 'px'}>
                                                <Box w={'170px'}>
                                                    <Text>{formattedDate}</Text>
                                                    <Text fontWeight={'semibold'}>{dayOfWeek}</Text>
                                                    <Text fontSize={'.875rem'} color="#AA9F93">
                                                    1669 Calories
                                                    </Text>
                                                    <Box mt="10px">
                                                    <MdOutlineRefresh size={24} />
                                                    </Box>
                                                </Box>
                            
                                                <CheckLoop mealTime="Breakfast" />
                                                <CheckLoop mealTime="Lunch" />
                                                <CheckLoop mealTime="Dinner" />
                            
                                                <SnackBox />
                                                </Flex>
                                            </Box>
                                            );
                                        })
                                    }
                                </AccordionPanel>
                            </AccordionItem>
                        </Accordion>
                    </Box>
                    
                </>
            ))

This code makes the 4 accordion render the same 7 objects which is not entirely what I want and in my head I know I should have more accordion panels and set the slice method accordingly but the way I have mapped those weeks make it impossible for me to do another accordion panel that slice the array from 8 to 15. I don't know if there is a way I can calculate the index to achieve that or manipulate the loop.