Vea aquí un Codesandbox que muestra mi problema .

Soy nuevo en Reaccionar. Estoy tratando de crear dinámicamente un elemento svg basado en la entrada del usuario. Estoy dividiendo las palabras individuales, calculando el ancho de estas palabras y colocándolas en una matriz de content .

Sin usar el gancho useState React, todo esto funciona bien. Las palabras individuales se agregan. Sin embargo, por alguna razón, cuando se usa useState , la matriz se actualiza de manera completamente diferente.

¿Cómo puedo hacer que mi ejemplo (izquierda) de Codesandbox funcione con el gancho React useState y qué me estoy equivocando?