I'm generating on demand TextField but I need to store the typed values to use it later. But it's freezing the UI and moving focus away to every char typed. What is the proper way to do this? the code goes like this:

typescript                    
<RenderEnterOptionInput
                            handleDeleteButton={() => deleteInputAnswerOption(i)}
                            key={`RenderEnterOptionInput-${i}`}
                            question="opção"
                            index={i+1}
                            value={inputValues[i]}
                            handleTextFieldChange={(e: ChangeEvent<HTMLInputElement>) => {
                                const v = e.target.value;
                                let a:string[] = [...inputValues];
                                a[i] = v;
                                setInputValues(a);
                            }}
                        />

const RenderEnterOptionInput = (props: IRenderEnterOptionInputProps) =>
{
    const
    { 
        question,
        index,
        handleTextFieldChange, 
        handleDeleteButton,
        value
    } = props;

    const foo:IFieldProps = {
        kind: 'EDIT',
        question: question,
    }

    return (
        <>
            <IconButton
                aria-label="Delete"
                onClick={handleDeleteButton}
                sx={{
                    position: 'absolute',
                    top: '5px',
                    right: '5px',
                }}
            >
                <CloseIcon />
            </IconButton>
            <RenderQuestion
                options={foo}
                index={index}
            >
                <TextField
                    variant="outlined"
                    sx={{
                        width: '300px'
                    }}
                    onChange={handleTextFieldChange}
                    value={value}
                />
            </RenderQuestion>
        </>
    )
}