How to use the @fluentui/react.ChatItem.slotClassNames function in @fluentui/react

import { Button, ChatMessage, ChatItem } from '@fluentui/react'

const classNames = {
  threadedMessage: {
    thread: `${ChatMessage.className}__thread`,
    threadBody: `${ChatMessage.className}__thread-body`,
    innerContent: `${ChatMessage.slotClassNames.content}-inner`,
    author: `${ChatMessage.slotClassNames.author}-inner`,
    timestamp: `${ChatMessage.slotClassNames.timestamp}-inner`,
  },
  threadReplies: {
    trigger: `${Button.className}__reply`,
    message: `${ChatMessage.className}__reply`,
    gutter: `${ChatItem.className}__reply__gutter`,
    chatItem: `${ChatItem.className}__reply`,
    chatItemMessage: `${ChatItem.slotClassNames.message}-reply`,
  },
  replyEditor: `${ChatMessage.className}__reply-editor`,
}

export default classNames

root: ({ props: p, theme: { siteVariables } }) => ({
        [`& .${ChatItem.slotClassNames.message}`]: {
          width: '100%',
        },
        [`&.${classNames.threadReplies.chatItem}`]: {
          padding: 0,
          backgroundColor: siteVariables.colorScheme.default.background1,
        },
        [`& .${classNames.threadReplies.chatItemMessage}`]: {
          margin: 0,
        },
        [`& .${classNames.threadReplies.gutter}`]: {
          left: pxToRem(15),
          zIndex: '1',
        },
      }),
    },