La respuesta a esta pregunta está profundamente vinculada a la naturaleza interna de React:

• Un proyecto React usa unidades modulares llamadas Componentes.
• Los componentes son anidables y reutilizables, y una vez que comience a componerlos, terminará con un árbol de componentes como se muestra en la imagen.
• Este árbol es manejado por reaccionar en un DOM virtual antes de que lo represente en el DOM real.
• React usa lo que se llama React State, para iniciar algoritmos de reconciliación y diferenciación para comprender cuándo y qué tiene que volver a renderizar ciertas ramas del árbol de componentes.

Con esta premisa, comprende que si desea que su botón active una representación del diagrama, necesita que el botón cambie un estado de reacción que se encuentra en el diseño (que es el padre común inferior) o en un componente que es un padre para el diseño. Esta es la razón por la que React vuelve a renderizar con un flujo de arriba hacia abajo, por lo que, por ejemplo, un cambio de estado en la barra lateral volverá a renderizar solo la barra lateral y el botón y no el diseño.

• Existen diferentes enfoques posibles para manejar esto y la elección depende de muchos factores diferentes. Por lo general, en aplicaciones grandes donde tiene cientos o miles de Componentes y tendrá muchos métodos que interactúan con un mismo estado, usando Redux. es el mejor enfoque, ya que es uno de los administradores de estado global más robustos, probados y sólidos que existen. Resuelve sus problemas ya que con Redux tendrá acciones globales que cambian su estado global, por lo que no tiene que preocuparse por dónde se declaran esas funciones o cómo pasarlas a sus hijos anidados, ya que puede enviar esas acciones desde cualquier lugar. en su aplicación, y puede recuperar el estado de la misma manera sin necesidad de perforarlo con accesorios de padre a hijo a través de su aplicación.
• React ofrece una herramienta para tener el estado y los controladores disponibles en sus componentes sin tener que perforarlos a través de sus componentes y su contexto. El contexto es útil para bibliotecas o para aplicaciones pequeñas en las que Redux u otros administradores de estado simplemente agregarían dependencias innecesarias al proyecto. Un cambio de contexto activará la representación de todo el árbol en cualquier caso hasta su hijo, puede evitar las representaciones intermedias utilizando el envoltorio React.memo().
  Puedes comprobar este ejemplo.

¿Cómo resolver este problema? Escuché sobre react-redux. ¿Tengo que usar esto o hay otras soluciones?

Entonces, esto depende de usted, si planea tener muchos de estos escenarios, sí, probablemente necesite un administrador de estado, Redux, Recoil, Valtio, Zustand, hay muchos de ellos. Lo que se adapte mejor a tu caso depende de muchos factores, solo pruébalos y ve cuál te gusta más.

La única solución sin redux (o API de contexto) está ahí

Si solo desea renderizar el componente necesario, deberá usar redux y su tienda. O tendrás que usar la API de contexto