How to handle 'ant design dynamic form' and update the state dynamically ? -REACT

See more:

Javascript

ReactJS

ES6

I have a dynamic form like this => Please Take a look at my form

I'm using Material UI autocomplete and textfield and Ant Design [Dynamic Form].

I'm having a issues in collecting data and updating the state dynamically and I have no idea what to do.

my state have a static object(inside the commission property) and i want also every new field to append inside commission property for example i want to achieve

commission: [
{commissionFor: 'Invoicng',commissionPercentage: '20'},
{commissionFor: 'New Field',commissionPercentage: '40'},
{commissionFor: 'Another New Field',commissionPercentage: '70'},
{commissionFor: 'Another New Field',commissionPercentage: '80'},
and ...
]

So we shouldn't delete anything from commission property. we need to clone it.

this is my state

const [data,setData] = useState({
commission: [{commissionFor: '',commissionPercentage: ''}]
})

This is my static form

<pre>  <Autocomplete
            onChange={(e, value) =>
              setData((data) => ({
                ...data,
                commission: data.commission.map((c, index) =>
                  index === 0
                    ? { ...c, commissionFor: value || e.target.value }
                    : c
                ),
              }))
            }
            renderInput={(params) => <TextField {...params} label="Commission For" />}
          />
        </div>
        <FormControl>
          <InputLabel>Percentage</InputLabel>
          <OutlinedInput
            value={input}
            onInput={(e) => setInput(e.target.value)}
            onBlur={(e, value) =>
              setData((data) => ({
                ...data,
                commission: data.commission.map((c, index) =>
                  index === 0
                    ? { ...c, commissionPercentage: value || e.target.value }
                    : c
                ),
              }))
            }
          />
        </FormControl>
                  <Button
                    type="dashed"
                    onClick={add}
                  >
                    Add New Field 
                  </Button>

On Every Button Click a AutoComplete and a Textfield should appear.

This is my Dynamic Form where the handling dynamic state changes should happen. but i have no idea how to it.

Please change the onChange event to your implementation.

<Form.List name="commision">
           {(fields, { add, remove }, { errors }) => (
             <>
               {fields.map((name, index) => (
                 <Row key={index}>
                   <Autocomplete
                    onChange={???????}
                     renderInput={(params) => (
                       <TextField {...params} label="CommissionFor />
                     )}
                   />
                   <FormControl>
                     <InputLabel>Percent</InputLabel>
                     <OutlinedInput
                       value={data[`commission`] || ""}
                       onChange={???????????}
                   </FormControl>
               ))}
             </>

Sorry for long code but this is driving me crazy. I hope someone help me. I Will really appreciate it

What I have tried:

i have tried a few things but all my implomention didn't work .
i really don't know what to do. i really need help and this is very important to me i'm junior and this is my first project