Не корректное отображение пункта в панели навигации

В панели навигации есть пункт Управление родителями и он на сайте отображается как ... и при наведении на него появляется пункт Управление родителями. Как сделать так чтобы пункт Управление родителями отображался как все остальные.

import React from "react";
import { Layout, Avatar, Menu, Popover, Button } from "antd";
import styles from "../Header/Header.module.scss";
import { SmileOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";

import * as Api from "@/api";

export const ParentsHeader: React.FC = () => {
  const router = useRouter();
  const selectedMenu = router.pathname;

  const onClickLogout = () => {
    if (window.confirm("Вы действительно хотите выйти?")) {
      Api.auth.logout();
      location.href = "/";
    }
  };

  return (
    <Layout.Header className={styles.root}>
      <div className={styles.headerInner}>
        <div className={styles.headerLeft}>
          <h2>
            <SmileOutlined rev={undefined} />
            CurateEasy
          </h2>

          <Menu
            className={styles.topMenu}
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={[selectedMenu]}
            onSelect={({ key }) => router.push(key)}
            items={[
              { key: "/dashboard", label: "Отчеты" },
              { key: "/dashboard/parents", label: "Список родителей" },
              { key: "/dashboard/parents/parentsManage", label: "Управление родителями" },
            ]}
          />
        </div>

        <div className={styles.headerRight}>
          <Popover
            trigger="click"
            content={
              <Button onClick={onClickLogout} type="primary" danger>
                Выйти
              </Button>
            }
          >
            <Avatar>A</Avatar>
          </Popover>
        </div>
      </div>
    </Layout.Header>
  );
};