Динамическое поле формы отображается с предыдущим значением в реакции

Question

Я пытаюсь создать динамические параметры, используя избыточную форму. До сих пор я создал объект в виде массива объектов в состоянии, названном параметрами, и теперь я могу создавать и удалять параметры, каждыйКогда я нажимал на кнопку «Добавить опцию», я просто помещал пустой объект опции в состояние объекта опций, то же самое будет и с удалением при нажатии на «Удалить», удаляя / удаляя этот конкретный объект опции индекса из опций состояния.

Теперь здесь идет проблема часть, когда я удаляю варианты в порядке.но если у моего удаленного поля опций есть некоторые значения, то когда я нажимаю на кнопку добавления, появляется новая опция, которая уже имеет значение (которое также было удалено из состояния), что я хочу, это удалить это значение из этой новой опции.

Я также попытался удалить значение onFocus, но ничего не решило мою проблему, я использую библиотеку material-ui для пользовательского интерфейса.

class AddQuestion extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isMultiChoice : false,
            options : [
                {
                    option : 'Option 1',
                    correct : false,
                    actors : []
                }
            ],
            actors : [],
            lengthErr : '',
        }

        this.handleChoiceChange = this.handleChoiceChange.bind(this);
        this.addQuestion = this.addQuestion.bind(this);
        this.handleInitialize = this.handleInitialize.bind(this); 

        this.addOption      = this.addOption.bind(this);
        this.removeOption = this.removeOption.bind(this);  
        this.handleActorOptionChange = this.handleActorOptionChange.bind(this); 
        this.handleOptionTextChange = this.handleOptionTextChange.bind(this);  
    }


    async removeOption(optionIndex) {
        await this.setState((prevState) => {
            let options = prevState.options;  
            options.splice(optionIndex, 1);

            return {
                options : options
            }
        }); 
    }

    async addOption() {
        await this.setState((prevState) => { 
            return {
                options : [
                    ...prevState.options,
                        {
                        option : 'Option new ',
                        correct : false,
                        actors : []
                    }
                ]
            }   
        });
    }

    handleOptionTextChange(event, optionIndex) { 

        let optionText = event.target.value;
        let options = this.state.options
        options[optionIndex].option = optionText;
        this.setState({options : options});
    }


    render() {  
        const  { classes, handleSubmit, errorMessage, isLoading} = this.props; 

        return ( 
            <Grid container style={{ 'margin' : '20px','width':'auto'}}>
                <form onSubmit={handleSubmit(this.addQuestion)} style={{'width':'100%'}} > 
                    <FormControl margin="normal" required fullWidth> 
                        <Field
                            name="video"
                            disabled
                            label={this.props.videoRow.title}
                            style={Style.widthAuto}
                            component={RenderTextField}
                        /> 
                    </FormControl>


                    <RenderOptions 
                        addOption={this.addOption}
                        removeOption={this.removeOption}
                        options={this.state.options}
                        handleOptionTextChange={this.handleOptionTextChange}
                    /> 



                    <FormControl margin="normal" required> 
                        <Button
                          type="submit" 
                          variant="contained"
                          color="primary" 
                          disabled={isLoading}
                          size="large"
                        >
                            {isLoading === true ? <Loader/> : ''} 
                            <SaveIcon /> Save
                        </Button>
                    </FormControl>
                </form>
            </Grid> 
        )       
    }
}

export default reduxForm({
    form : 'addQuestionForm',
    validate 
})(AddQuestion);

export const RenderOptions = (props) => { 
  return (
        props.options.map((option, index) => { 
            let optionText = 'options[' + index + ']';
            let optionCorrect = 'options[' + index + '].correct';
            let label = 'Option ' + (index + 1);
            return (
            <Grid key={index} container item> 
                <Field
                    name={optionText}
                    value={optionText}
                    label={label}
                    onChange={(e) => props.handleOptionTextChange(e, index)} 
                    style={Style.width40}
                    component={RenderTextField}
                    required    
                />

                <Field
                    name={optionCorrect} 
                    style={Style.timeInput}
                    component={RenderCheckboxField} 
                />

                {(props.options.length !== 1) ? 
                    <Button
                        size="small"  
                        style={Style.widthAuto} 
                        onClick={() => props.removeOption(index)} 
                    >
                        <RemoveCircleIcon/>
                    </Button> 
                    : ''
                }
                {(props.options.length === (index + 1) && props.options.length < 4) ?
                    <Button
                        size="small" 
                        style={Style.widthAuto} 
                        onClick={() => props.addOption()} 
                    >
                        <AddCircleIcon/>
                    </Button>
                    : ''
                }  
            </Grid>
            )  
        })
    )
}

export const RenderTextField = (props) => {
    const { input, label ,meta : {touched, invalid, error }, ...custom} = props;
    // console.log('Getting ', input);
    return (
        <TextField
            {...custom}
            {...input}
            label={label}
            placeholder={label}
            error={touched && invalid}
            helperText={touched && error} 
        />
    )
}