'Menu content display issue

I need some help pls. I created a menu with section and courses; but the section-labels are repeating.

I would like all courses with the same section to be displayed on a single section lable.

Please see code and screenshot.

<Menu

                            defaultSelectedKeys={[clicked]}
                            inlineCollapsed={collapsed}
                            style={{ height: "100vh", overflow: "scroll" }}
                            mode="inline"
                        >

                            {course.lessons.map((lesson, index) => (

                                <SubMenu
                                    title={lesson.section}>
                                    <ItemGroup
                                        key={index}>

                                        <Item
                                            onClick={() => setClicked(index)}
                                            key={index}
                                            icon={<Avatar>{index + 1}</Avatar>}
                                        >

                                            {lesson.title.substring(0, 30)}
                                            {" "}
                                            {completedLessons.includes(lesson._id) ? (
                                                <CheckCircleFilled
                                                    className="float-end text-primary ml-2"
                                                    style={{ marginTop: "13px" }}
                                                />
                                            ) : (
                                                <MinusCircleFilled
                                                    className="float-end text-danger ml-2"
                                                    style={{ marginTop: "13px" }}
                                                />
                                            )}
                                        </Item>

                                    </ItemGroup>
                                </SubMenu>
                            ))}
                        </Menu>

Screenshot of the Menu



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source