add inputs dynamically react redux

hello I will ask this question again because I still can’t find a answer I try to create a form similar to google form with react and redux

each question is represented by: QuestionCard contains a title and can have several types (short question, long question, choice ,multiple, single choice ...) I manage to add cardQuestion and delete them

my problem is that when I select single choice I want to give the user the possibility to add the number of choices he wants but it does not work

this is my reducer

const initialState = {
    formId: '',
    form: {
        
        title: '',
        description: ''
    },
    basicForm: {
        fullName: '',
        age: '',
       
        saved: false
    },
    cardQuestion: [{
        
        title: '',
        choix: [],
        type: '',
        

    }],
    error: "",
    loading: false,
}

const addRequestReducer = (state = initialState, action) => {

    switch (action.type) {
        case 'SET_STATE':
            return { ...state, ...action.payload }
        default:
            return state
    }
}

i use a global state

and this how i try to add choices

1- i handle change of inputs (each choice) like this :

  const { cardQuestion } = useSelector((state) => state.addRequest)
const choice = cardQuestion.map(e => e.choix)

   const onChangeInput = (i, key, value) => {
        console.log(value)
        dispatch({
            type: 'SET_STATE',
            payload: {
                cardQuestion: cardQuestion.map((elem, index) => {
                    console.log(i)
                    console.log(i === index)
                    if (i !== index) return elem
                    return { ...elem, [`${key}`]: value }
                })
            }
        })
    }

2- use the ChangeInptut like this

<div >{choice.map((elem, i) => <div key={i}>
                            <Input value={elem.choix} onChange={(e) => onChangeInput(i, 'choix', e.target.value)} />
   </div>

3- button to add new input (choice)

<Button onClick={() => dispatch({
                                type: 'SET_STATE',
                                payload: {
                                    cardQuestion: [...cardQuestion, { choix: '' }]


                                }
                            })} >Add</Button>

                        </div>

but it give me results like this :

and when i add a choice in question card1 it is also added in questioncard2

how can i resolve this , any help will be appreciated

Solution

This

cardQuestion: [...cardQuestion, { choix: '' }]

adds a new card without a title or type to the list of cards. If I understand you correctly, you want to add a new choice to an existing card, which will look something like

const newCards = [...cardQuestion]
newCards[currentCardPosition] = {...newCards[currentCardPosition]}
newCards[currentCardPosition].choix = [...newCards[currentCardPosition].choix, '' ]

but I don't see where currentCardPosition will come from