Why is this nested array not rendered?

[REDLIGHTFILMS]

I have a problem with nested objects. I have an object where the array "information" is located and in it is another array called "financeRounds".
This is the section for the form and in it I render the financing rounds. But why are they not rendered on the second one when I call append().
Do you have any idea how to solve this?

This is my datastructure for economyData:

economyData:{
  information: [
    {
      financeRound: [
         {
          round: "",
          investor: ""
         }
      ]
    }
  ]

}

Here is my code:

import React from 'react'
import { TextField, IconButton, Typography } from '@material-ui/core';
import CancelIcon from '@material-ui/icons/Cancel';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import { useFieldArray } from 'react-hook-form';
import FinanceRoundField from './Fields/FinanceRoundField';
import InvestmentsField from './Fields/InvestmentsField';
import ProductsField from './Fields/ProductsField';
import { economyTextFieldStyle } from '../../../shared/SharedStyles';

interface IProps {
    register: any;
    errors: any;
    control: any
}

const EconomyDataSection:React.FC<IProps> = ({ register, errors, control }) => {

    const { fields, append, remove } = useFieldArray({
        control,
        name: "economyData.information"
    });

    return (
       <React.Fragment>
           <Typography style={{marginLeft: 20}} variant="h6">Finanzdaten</Typography>
           <div style={{ display: "block" }}>
            {fields.map((item, index) => {
                return (
                    <fieldset
                        style={{ border: "none" }}
                        key={item.id}
                        >
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].year`}
                            label="Jahr"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].turnover`}
                            label="Umsatz"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].cashOnHand`}
                            label="Kassenbestand"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].balanceSum`}
                            label="Bilanzsummer"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].customerNumber`}
                            label="Kundenanzahl"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].balanceWin`}
                            label="Bilanzgewinn"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].netProfit`}
                            label="Gewinn"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].netLoss`}
                            label="Verlust"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].accumulatedLosses`}
                            label="Verlustvortrag"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={ economyTextFieldStyle }
                            name={`economyData.information[${index}].source`}
                            label="Quelle"
                            variant="outlined"
                            inputRef={register()}
                            type="text"
                        />
                        <FinanceRoundField name="financeRound" register={register} control={control} indexValue={index} />
                        <InvestmentsField register={register} control={control} indexValue={index} />
                        <ProductsField register={register} control={control} indexValue={index} />
                        {index > 0 ?
                            <IconButton
                                color="secondary"
                                onClick={() => remove(index)}
                            >
                                <CancelIcon style={{fontSize: "30px"}}/>
                            </IconButton> : 
                            <IconButton
                            style={{color: "green"}}
                            onClick={() => {append({})}}
                            >
                                <AddCircleIcon style={{fontSize: "35px"}}/>
                            </IconButton>}
                    </fieldset>
                );
                })}
               
                
           </div>
       </React.Fragment>
    )
}

export default EconomyDataSection

This is the financeRoundSection:

import React from 'react'
import { TextField, IconButton, Typography } from '@material-ui/core';
import CancelIcon from '@material-ui/icons/Cancel';
import AddCircleIcon from '@material-ui/icons/AddCircle';
import { useFieldArray } from 'react-hook-form';

interface IProps {
    register: any,
    control: any,
    indexValue: number,
    name: string
}

const FinanceRoundField:React.FC<IProps> = ({ register, control, indexValue, name }) => {

    const { fields, append, remove } = useFieldArray({
        control,
        name: `economyData.information[${indexValue}].financeRounds`
    });

    return (
        <React.Fragment>
            <Typography style={{marginLeft: 5}} variant="h6">Finanzierungsrunden</Typography>
            {fields.map((item, index) => {
                return (
                    <fieldset
                        style={{ border: "none" }}
                        key={item.id}
                    >
                        <TextField
                            style={{marginLeft: -10}}
                            name={`economyData.information[${indexValue}].financeRounds[${index}].round`}
                            label="Runde"
                            variant="outlined"
                            inputRef={register()}
                            type="text"
                        />
                        <TextField
                            style={{marginLeft: 10}}
                            name={`economyData.information[${indexValue}].financeRounds[${index}]sum`}
                            label="Summe"
                            variant="outlined"
                            inputRef={register()}
                            type="number"
                        />
                        <TextField
                            style={{marginLeft: 10}}
                            name={`economyData.information[${indexValue}].financeRounds[${index}].investor`}
                            label="Investor"
                            variant="outlined"
                            inputRef={register()}
                            type="text"
                        />
                        {index > 0 ?
                        <IconButton
                            color="secondary"
                            onClick={() => remove(index)}
                        >
                            <CancelIcon style={{fontSize: "30px"}}/>
                        </IconButton> : 
                        <IconButton
                         style={{color: "green"}}
                         onClick={() => {append({})}}
                        >
                            <AddCircleIcon style={{fontSize: "35px"}}/>
                        </IconButton>}
                    </fieldset>
                );
            })}
               
        </React.Fragment>
    )
}

export default FinanceRoundField

[keiya01]

Please send codesandbox.

[REDLIGHTFILMS]

Well, maybe you have a good example how to do this with the stepper from material ui? Because I don't understand it at all and this one didn't help me either: https://codesandbox.io/s/stepper-with-react-hook-form-qpjc1?from-embed=&file=/src/Forms.js:262-265

[keiya01]

Please try to do this.
https://codesandbox.io/s/array-problem-tyhk7?file=/src/FormSections/BasicDataSection.tsx

[REDLIGHTFILMS]

I have changed it so that I have now set the default values. We have the same problem with the economic data, but that can be solved. But how do I make it now so that the data remain in the fields although by clicking, so by the stepper?

https://codesandbox.io/s/array-problem-1cxx9

[keiya01]

Could you upgrade to V6 ? If you can upgrade to V6, you can use shouldUnregister option.
https://react-hook-form.com/api/#useForm

If you can not upgrade to V6, you can not unmount component. That is you need to toggle display: none; and display: block;.

[REDLIGHTFILMS]

I have tried to use the useFieldArray hack but it does not work for my scenario. I am using a global state and can't solve it like in the solution of keiya01. I have updated my code here again: https://codesandbox.io/s/array-problem-n8t69

It would be cool if you could maybe find a solution for that, because that's all my form is failing at the moment...