DropDown with submenu

Пытаюсь сделать DropDown для user, на подобии как в youtube, где есть главное меню и под меню, определяю я вот так

const dropDownData = [
                {
                    id: 1,
                    path: "/account",
                    title: translation[lang].useDropDown["main-menu"].account,
                    icon: <FaUserCircle />,
                    submenu: []
                },
                {
                    id: 2,
                    path: "/settings",
                    title: translation[lang].useDropDown["main-menu"].settings,
                    icon: <AiFillSetting />,
                    submenu: []
                },
                {
                    id: 3,
                    path: "",
                    title: translation[lang].useDropDown["main-menu"].lang,
                    action: userDropDownActions.language,
                    icon: <MdLanguage />,
                    submenu: [
                        {
                            id: 1,
                            type: "en",
                            title: "English",
                        },
                        {
                            id: 2,
                            type: "ru",
                            title: "Русский",
                        },
                    ]
                },
                {
                    id: 4,
                    path: "",
                    title: translation[lang].useDropDown["main-menu"].exit,
                    action: userDropDownActions.logout,
                    icon: <BiExit />,
                    submenu: [],
                }
            ]

export const UserDropDownList: React.FC<IUserDropDownListProps> = (): JSX.Element => {
    const [submenuData, setSubmenuData] = useState<IUserDropDownSubmenu[]>([]);
    const [isOpenSubmenu, setIsOpenSubmenu] = useState<boolean>(false);

    const handlerBack = (): void => {
        setIsOpenSubmenu(false);
    };

    return (
        <nav className={style.userDropDownNav}>
            {!isOpenSubmenu && (
                <ul className={style.userDropDownList}>
                    {userDropDownData.map((item: IUserDropDownData) => (
                        <UserDropDownItem
                            key={item.id}
                            data={item}
                        />
                    ))}
                </ul>
            )}

            {isOpenSubmenu && (
                <UserDropDownSubmenuList
                    data={submenuData}
                    handlerBack={handlerBack}
                />
            )}
        </nav>
    );
};

я но понимаю как сделать что бы у каждого элемента главного меню или под меню были свои обработчики, в этих обработчиках может быть разная логика выполнения, при этом, что бы мог использовать хуки, например я использую хук для получения свойств перевода при переключении языка.

Как можно это реализовать? Что бы в компонент по мере увеличении кода в случаи добавления нового пункта не приходилось прописывать целый компонент а то и 2 компонента?