如何在与 <Menu/> 相同的行上渲染组件？

如何解决如何在与 <Menu/> 相同的行上渲染组件？

我正在尝试将一个表示为登录按钮的组件嵌入到导航菜单的同一行中。这是该组件：

SignInButton.tsx

function handleLogin(instance: IPublicclientApplication) {
    instance.loginPopup(loginRequest).catch(e => {
        console.error(e);
    });
}

/**
 * Renders a button which,when selected,will open a popup for login
 */
export const SignInButton = () => {
    const { instance } = useMsal();

    return (
        <Button primary={true} className="ml-auto" onClick={() => handleLogin(instance)}>Login</Button>
    );
}

下面是我试图用 kendo-react-ui 实现但在 reactstrap 中实现的片段：

我尝试过类似以下的方法：

<Menu onSelect={onSelect}>
    <MenuItem text="Home" data={{ route: "/" }} />
    <MenuItem text="Counter" data={{ route: "/counter" }} />
    <MenuItem text="Users" data={{ route: "/users" }} />
    {SignInButton}
    // OR
    <SignInButton />
</Menu>

但按钮永远不会出现。似乎只有 MenuItem 会在 Menu 中呈现。如果我将 <SignInButton/> 放在 </Menu> 之后，那么它不会停留在同一行，即使我用 bootstrap row 告诉它； Menu 始终占据整行。

如何使用 kendo-react-ui 实现这一目标？