I have a plotly graph with several annotations with an extra UUID parameter. I also have a list of these annotations and what I want is that the annotation I select on the list changes its border color. The function I'm using to change the border color is the following:

const annotations = [
  {...},
  {...}
]
const selectAnnotation = (id)=> {
        const dummyAnnotations = clone(annotations)
        dummyAnnotations.forEach((note) => {
          if (note.id===id){
            note.bordercolor = 'red'
          } else {
            note.bordercolor = 'white'
          }
        })

        setAnnotations(dummyAnnotations)
    }

<h2>Annotations:</h2>
{annotations.map((note)=>
     <li key={note.id}>
          <button 
              className='button'
              onClick = {()=>selectAnnotation(note.id)}
          >
              {note.text}&nbsp;
          </button>                       
     </li>
)}

However, when I click an annotation on the list, the corresponding one on the graph disappears, only to appear again when I change the graph size manually. Here are some screenshots:

Plot before selecting any note

Plot after selecting one-note

Plot after resizing the window, now the note is back and with new border color

Any ideas about what's going on? Thanks!