See here for a Codesandbox displaying my problem.

I'm new to React. I am trying to dynamically create a svg element based on user input. Im splitting up the individual words, calculating the width of these words, and push them into a content array.

Without using the useState React hook, this all works fine. The individual words get added. However, for some reason when using useState, the array is updated entirely different.

How can I make my (left) example from the Codesandbox work with the React useState hook and what am I getting wrong?