Tengo un gráfico plotly con varias anotaciones con un parámetro UUID adicional. También tengo una lista de estas anotaciones y lo que quiero es que la anotación que selecciono en la lista cambie el color de su borde. La función que estoy usando para cambiar el color del borde es la siguiente:

 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> )}

Sin embargo, cuando hago clic en una anotación en la lista, la correspondiente en el gráfico desaparece, solo para volver a aparecer cuando cambio el tamaño del gráfico manualmente. Aquí hay algunas capturas de pantalla:

Trazar antes de seleccionar cualquier nota

Trazar después de seleccionar una nota

Trazar después de cambiar el tamaño de la ventana, ahora la nota está de vuelta y con un nuevo color de borde

¿Alguna idea sobre lo que está pasando? ¡Gracias!