I attempted to use renderItem to include a divider and Icon in a Fluent UI dropdown menu, but the icons are not visible. Even the default value does not display the icons, and the dropdown menu does not appear after clicking.
import * as React from "react";
import { Dropdown, DropdownItemProps, Flex, Text } from "@fluentui/react-northstar";
import { AcceptIcon, TeamsIcon } from "@fluentui/react-icons-northstar";
interface CustomDropdownItemProps extends DropdownItemProps {
icon: React.ReactNode;
key: string;
kind?: "divider";
}
const items = [
{
key: "myMatters",
header: "My matters",
icon: <AcceptIcon />,
},
{
kind: "divider" as const,
},
{
key: "teamName1",
header: "Team Name",
icon: <TeamsIcon />,
},
];
const renderItem = (item: any) => (
<Flex gap="gap.smaller" vAlign="center">
{item.icon}
<Text content={item.header as string} />
</Flex>
);
export const DropdownMenu: React.FC = () => (
<Dropdown
items={items}
placeholder="Select an option"
defaultValue={items[0]}
checkable
renderItem={renderItem}
inline
/>
);