Render dynamicly generated forms (deeply nested) unlimited nesting

[nikasepiskveradze]

So I have a form in Reactjs app, which is dynamically created by the user, I mean user adding the inputs as many as he/she wants, but there is one thing that complicates everything, those inputs may be nested inside, for example, this is the data which may be rendered:

blocks:[
   {key:'1', value:'something'},
   {key:'2', value:'something'},
   {key:'3', blocks: [ 
      {key:'12', value:'something'}
      {key:'13', blocks: [] }
   ]} 
]

So this is the example of how data is changed, overtime users can maybe add another nested inputs and more and more complex may become this data, as you can see it's very dynamic,
my question is how should I render that kind of data, I tried recursion but it's very complicated, another solution is to restrict users not adding too many nesting, but the business wants that feature so what can you suggest
I am using React with Formik library for forms handling