Replacing Emoji Picker Component

import "@blocknote/core/fonts/inter.css"; import {  DefaultReactGridSuggestionItem,  GridSuggestionMenuController,  GridSuggestionMenuProps,  useCreateBlockNote, } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css";  import "./styles.css";  // Custom component to replace the default Emoji Picker. function CustomEmojiPicker(  props: GridSuggestionMenuProps<DefaultReactGridSuggestionItem>, ) {  return (  <div  className={"emoji-picker"}  style={  { gridTemplateColumns: `repeat(${props.columns || 1}, 1fr)` } as any  }  >  {props.items.map((item, index) => (  <div  className={`emoji-picker-item ${  props.selectedIndex === index ? "selected" : ""  }`}  onClick={() => {  props.onItemClick?.(item);  }}  >  {item.icon}  </div>  ))}  </div>  ); }  export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({  initialContent: [  {  type: "paragraph",  content: "Welcome to this demo!",  },  {  type: "paragraph",  content: "Press the ':' key to open the Emoji Picker",  },  {  type: "paragraph",  content: "It's been replaced with a custom component",  },  {  type: "paragraph",  },  ],  });   // Renders the editor instance.  return (  <BlockNoteView editor={editor} emojiPicker={false}>  <GridSuggestionMenuController  triggerCharacter={":"}  gridSuggestionMenuComponent={CustomEmojiPicker}  columns={10}  minQueryLength={2}  />  </BlockNoteView>  ); } 

.emoji-picker {  background-color: white;  border: 1px solid lightgray;  border-radius: 2px;  box-shadow: 0 0 8px #dddddd;   display: grid;  flex-direction: column;  gap: 8px;  height: fit-content;  max-height: inherit;   overflow: auto;   padding: 8px;   top: 8px; }  .emoji-picker-item {  background-color: white;  border: 1px solid lightgray;  border-radius: 2px;  box-shadow: 0 0 4px #dddddd;   cursor: pointer;   font-size: 16px;   align-items: center;  display: flex;  flex-direction: row;   padding: 8px; }  .emoji-picker-item:hover, .emoji-picker-item.selected {  background-color: lightgray; }