how do i use mreact memo here: const Content: React.FC<Props> = (props) => {
  const { isStreaming, messages, composer, streamingMessage, onPromptSelected } = props;
  const scrollToBottom = useScrollToBottom();
  const {
    citations: { hasCitations },
  } = useCitationsStore();

  useFixCopyBug();
  const [isAtBottom] = useSticky();
  const prevIsStreaming = usePrevious(isStreaming);

  // Wait some time before being able to fetch previous messages
  // This is to prevent loading a bunch of messages on first load
  const [isReadyToFetchPreviousMessages, setIsReadyToFetchPreviousMessages] = useState(false);
  useTimeoutEffect(() => {
    setIsReadyToFetchPreviousMessages(true);
  }, 1000);

  // Show the `New Message` button if the user has scrolled up
  // and the last message is a bot message.
  // This reruns when isAtBottom or isStreaming changes only since
  // these are the only times users may miss the newest message.
  const showNewMessageButton = useMemo(() => {
    // Whether the user is at the bottom of the messages container
    if (isAtBottom) return false;
    // When isStreaming changes this means that the bot has sent a new message
    // or is in the process of sending a new message
    if (prevIsStreaming === isStreaming) return false;
    if (!streamingMessage) return false;
    return true;
  }, [isAtBottom, isStreaming]);

  // Scroll to bottom when the user adds a new message
  useEffect(() => {
    const lastMessage = messages[messages.length - 1];
    if (lastMessage?.type === MessageType.USER) {
      scrollToBottom({ behavior: 'smooth' });
    }
  }, [messages.length, scrollToBottom]);

  const { citationToStyles, messageContainerDivRef, composerContainerDivRef } =
    useCalculateCitationStyles(messages, streamingMessage);

  const handleScrollToNewMessage = () => {
    scrollToBottom({ behavior: 'smooth' });
  };

  return (
    <div className="flex h-max min-h-full w-full">
      <div id={MESSAGE_LIST_CONTAINER_ID} className={cn('flex h-auto min-w-0 flex-1 flex-col')}>
        <Messages {...props} ref={messageContainerDivRef} onPromptSelected={onPromptSelected} />
        {/* Composer container */}
        <div
          className={cn('sticky bottom-0 px-4 pb-4', 'bg-marble-100')}
          ref={composerContainerDivRef}
        >
          <Transition
            show={showNewMessageButton}
            enter="duration-300 ease-out transition-all"
            enterFrom="translate-y-10 opacity-0"
            enterTo="translate-y-0 opacity-100"
            leave="duration-300 ease-in transition-all"
            leaveFrom="translate-y-0 opacity-100"
            leaveTo="translate-y-10 opacity-0"
            className="absolute bottom-full left-1/2 -z-10 flex h-fit -translate-x-1/2 transform pb-4"
          >
            <Button
              label="New message"
              splitIcon="arrow-down"
              onClick={handleScrollToNewMessage}
              hideFocusStyles
              kind="primaryOutline"
            />
          </Transition>
          {composer}
        </div>
      </div>

      <div
        className={cn('hidden h-auto border-l border-marble-400', { 'md:flex': hasCitations })}
      />

      <CitationPanel
        citationToStyles={citationToStyles}
        streamingMessage={streamingMessage}
        className={cn(
          ReservedClasses.CITATION_PANEL,
          'hidden',
          { 'md:flex': hasCitations },
          'relative h-auto w-auto',
          'md:min-w-citation-panel-md lg:min-w-citation-panel-lg xl:min-w-citation-panel-xl'
        )}
      />
    </div>
  );
};