any idea why when i update annotsAdded usestate this doesnt rerender? return (
    <div
      id={
        isFulfilledOrTypingMessage(message) && message.generationId
          ? getMessageRowId(message.generationId)
          : undefined
      }
      className={cn(ReservedClasses.MESSAGE, 'flex', className)}
      //onMouseEnter={handleOnMouseEnter}
      //onMouseLeave={handleOnMouseLeave}
      onMouseUp={handleMouseUp}
      ref={ref}
    >
      <LongPressMenu
        isOpen={isLongPressMenuOpen}
        close={() => setIsLongPressMenuOpen(false)}
        className="md:hidden"
      >
        <div className={cn('flex flex-col divide-y', 'divide-marble-300')}>
          <div className="flex flex-col gap-y-4 pt-4">
            <CopyToClipboardButton
              value={getMessageText()}
              label="Copy text"
              kind="secondary"
              iconAtStart
              onClick={onCopy}
            />
            {hasSteps && (
              <Button
                label={`${isStepsExpanded ? 'Hide' : 'Show'} steps`}
                startIcon={<Icon name="list" />}
                kind="secondary"
                size="md"
                aria-label={`${isStepsExpanded ? 'Hide' : 'Show'} steps`}
                animate={true}
                onClick={() => setIsStepsExpanded((prevIsExpanded) => !prevIsExpanded)}
              />
            )}
          </div>
        </div>
      </LongPressMenu>
      <div
        id='msgrow' className={cn(
          'group flex h-fit w-full flex-col gap-2 rounded-md p-2 text-left md:flex-row',
          'transition-colors ease-in-out',
          'hover:bg-secondary-100',

          // {
          //   'bg-secondary-50':
          //     isFulfilledOrTypingMessage(message) &&
          //     message.generationId &&
          //     hoveredGenerationId === message.generationId,
          //   'bg-primary-50 hover:bg-primary-50': highlightMessage,
          // }
        )}
        {...(enableLongPress && longPressProps)}
      >
        <div className="flex w-full gap-x-2">
          <Avatar message={message} />
          <div className="flex w-full min-w-0 max-w-message flex-1 flex-col items-center gap-x-3 md:flex-row">
            <div className="w-full">
              {hasSteps && <ToolEvents show={isStepsExpanded} events={message.toolEvents}/>}

              {//This is where we render the annotated box
              }

              {/* <MessageContent 
              isLast={isLast}
              message={message}
              onRetry={onRetry}
              overrideText={preprocessedMessage}
              >
              </MessageContent> */}


                  <div>
                    {renderAnnotatedText({p_msg:preprocessedMessage})}
                  </div>



              {//This was an old rendering pipeline. 
              //<MessageContent isLast={isLast} message={message} onRetry={onRetry} />
              }

              {/* {annotations.map((annotation, index) => (
                <div key={index} className='bg-secondary-50 p-1 my-1'>
                  <span className='font-bold'>{annotation.text}</span>: {annotation.annotation}
                </div>
              ))} */}

            
            {Object.keys(annotDict).length > 0 && <h1 id='annots' className={cn('text-title','font-bold','font-family-CohereIconDefault')} 
                                                      style={{ paddingTop: '0.5rem', paddingBottom: '0.3rem', }}>
                                                  Annotations</h1>}
            {Object.keys(annotDict).length > 0 &&  <hr id='annots' style={{ paddingTop: '0.5rem', paddingBottom: '0.1rem', border: 'none', borderTop: '2px solid black' }}></hr>}
            {Object.entries(annotSortDict).map(([key, annotation], index) => (
                <div id='annots' key={index} className={cn()}>
                  <span id='annots' className='clickable cursor-pointer bg-yellow-100 hover:underline focus:underline' style={{                               
                                fontSize: '10.5px', // Adjust the font size as needed
                                height: '1rem', // Adjust the height as needed
                                width: '20px', // Adjust the width as needed
                                padding: '0.3rem', // Adjust the padding as needed
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                fontWeight: 'bold'
                              }}
                              onClick={() => handleClick(key)}
                              >{index + 1}{'. '}{annotation.htext}
                  </span>

                  <span id='annots' className='bg-secondary-900' style={{                               
                                fontSize: '10.5px', // Adjust the font size as needed
                                height: '1rem', // Adjust the height as needed
                                width: '200px', // Adjust the width as needed
                                paddingTop: '0.3rem', // Adjust the padding as needed
                                paddingBottom: '0.3rem',
                                paddingLeft: '-0.01rem',
                                paddingRight: '-0.1rem',
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                fontWeight: 'bold'
                              }}>
                              
                    </span>
                            
                    <span id='annots' className='clickable cursor-pointer bg-danger-50' style={{                               
                                fontSize: '10.5px', // Adjust the font size as needed
                                height: '1rem', // Adjust the height as needed
                                width: '20px', // Adjust the width as needed
                                padding: '0.3rem', // Adjust the padding as needed
                                lineHeight: '1.5', // Adjust the line height as needed
                                fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                                fontStyle: 'italic'
                              }}
                              onClick={() => handleClick(key)}
                              >{annotation.annotation}
                    </span>
                    <Icon size={'md'} name='trash' kind="outline" onClick={() => handleAnnotationDelete(key)} className={cn(
                    'transition ease-in-out',
                    'text-volcanic-600 hover:bg-secondary-100 hover:text-volcanic-800 cursor-pointer',
                    //'bg-secondary-200',
                    'trash' 
                  )} style={{                               
                    fontSize: '10.5px', // Adjust the font size as needed
                    height: '1rem', // Adjust the height as needed
                    width: '200px', // Adjust the width as needed
                    padding: '0.3rem', // Adjust the padding as needed
                    marginTop: '15px',
                    lineHeight: '1.5', // Adjust the line height as needed
                    fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                  }}/>
                  {!isAnnotAdded(key, addedAnnots) && <Icon size={'md'} name='add' kind="outline" onClick={() => handleAddPromptAnnotation(key)} className={cn(
                      'transition ease-in-out',
                      'text-volcanic-600 hover:bg-secondary-100 hover:text-volcanic-800 cursor-pointer',
                      //'bg-secondary-200',
                      'trash' 
                    )} style={{                               
                      fontSize: '10.5px', // Adjust the font size as needed
                      height: '1rem', // Adjust the height as needed
                      width: '200px', // Adjust the width as needed
                      padding: '0.3rem', // Adjust the padding as needed
                      marginTop: '15px',
                      lineHeight: '1.5', // Adjust the line height as needed
                      fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                    }}/>}
                    {isAnnotAdded(key, addedAnnots) && <Icon size={'md'} name='subtract' kind="outline" onClick={() => handleRemovePromptAnnotation(key)} className={cn(
                      'transition ease-in-out',
                      'text-volcanic-600 hover:bg-secondary-100 hover:text-volcanic-800 cursor-pointer',
                      //'bg-secondary-200',
                      'trash' 
                    )} style={{                               
                      fontSize: '10.5px', // Adjust the font size as needed
                      height: '1rem', // Adjust the height as needed
                      width: '200px', // Adjust the width as needed
                      padding: '0.3rem', // Adjust the padding as needed
                      marginTop: '15px',
                      lineHeight: '1.5', // Adjust the line height as needed
                      fontFamily: 'Arial, sans-serif', // Adjust the font family as needed
                    }}/>}
                </div>
                
              ))}
            {Object.keys(annotDict).length > 2 &&  <hr id='annots' style={{ marginTop: '0.8rem', paddingTop: '0.8rem', paddingBottom: '0.1rem', border: 'none', borderTop: '2px solid black' }}></hr>}
            </div>
            


            

            <div
              className={cn('flex h-full items-end justify-end self-end', {
                'hidden md:invisible md:flex':
                  !isFulfilledMessage(message) && !isUserMessage(message),
                'hidden md:invisible md:flex md:group-hover:visible': !isLast,
              })}
            >
              {/* {hasSteps && (
                <Tooltip label={`${isStepsExpanded ? 'Hide' : 'Show'} steps`} hover>
                  <IconButton
                    iconName="list"
                    className="rounded hover:bg-secondary-100"
                    iconClassName={cn(
                      'text-volcanic-800 group-hover/icon-button:text-secondary-800',
                      {
                        'hidden md:invisible md:flex': !isFulfilledMessage(message),
                      }
                    )}
                    onClick={() => setIsStepsExpanded((prevIsExpanded) => !prevIsExpanded)}
                  />
                </Tooltip>
              )} */}
              <CopyToClipboardIconButton value={getMessageText()} onClick={onCopy} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});
export default MessageRow;