JSON.parse works only after re-render in React/Next [duplicate]

I have an object called organizationCustomizationOptions, which is a String. If I print that string without parsing it, I will get something like '{"name":"John", "age":30, "city":"New York"}'

Please note that I'm changing the actual JSON which is something way more complex to this simple example from W3 Schools. The only difference might be that the real JSON contains line breaks and HTML tags inside. I've already dealt with that by adding a dangerouslySetInnerHTML prop inside the

tag into which I want to put a text in and my own CSS classes. The line breaks and HTML tags inside the string might be out of scope of this problem, but just wanted to give the info just in case.

If I try to console.log(JSON.parse(organizationCustomizationOptions)) I get SyntaxError: Unexpected token u in JSON at position 0. However If I comment this line, render the app, and then uncomment, everything works perfectly.

This is obviously not happening with the simple object in the example. It's happening with the big, complex object that has line breaks and HTML tags inside.