so I've a sms mesasge body which creates another segment if the charaeter goes greater than 160 but sadly the cursor is not moving to the newly created segment.`

 const [cursor, setCursor] = useState(0);


useLayoutEffect(() => {
    if (showSegmentsTabs.includes(tabType) && activeTarget) {
        activeTarget.selectionStart = cursor;
        activeTarget.selectionEnd = cursor;
    }
});

return (
                    <ActiveMessageTabComponent
                        {...props}
                        {...field}
                        onFocus={handleLastActiveField(field.name)}
                        cursor={cursor}
                        setCursor={setCursor}
                        onChange={(...params) => {
                            const [event] = params;

                            if (tabType === 'sms') {
                                const smsText = getSmsText(values, activeLanguageTab);

                                if (
                                    _.get(event, 'nativeEvent.data') &&
                                    smsText.length >= maxInputLengthConfig[tabType]
                                ) {
                                    return;
                                }
                            }

                            field.onChange(...params);

                            const input = event.target;
                            const cursor = input.selectionStart;

                            setCursor(cursor);
                        }}
                    />
                );
            }}
        </Field>
    );
};

The above code is used to render the text box and the it will be create a new sms segment based on user input I reckon, I tried adding autofocus as a property while rendering but the cursor is not moving forward, can someone help me to implemnet the cursor in a way that it moves along with the user's input.