TextInput value is not moving focus to other input field

The input box is require to behave like for every focus element | this indicator should be there but its is not giving desired output

Expected Behaviour On every focus the | should be there and when the input is entered this | should get removed and move to next focus

Current Behaviour

This | is coming in every input field initially

On entering the value the | get disappear and didn't move to next input field

  const handleFocus = (index: any) => setFocused(index);

  const handleBlur = () => setFocused(0);

  const data = [
    useRef<TextInput>(null),
    useRef<TextInput>(null),
    useRef<TextInput>(null),
    useRef<TextInput>(null),
    useRef<TextInput>(null),
    useRef<TextInput>(null),
  ];
 const Input = (props: any) => {
    const {index} = props;

    return (
      <View
        style={[
          styles.Box,
          {borderColor: focused ? white : grey},
        ]}>
        {otp.length >= 1 ? (
          <TextInputField
            keyboardType="number-pad"
            maxLength={1}
            autoFocus={true}
            style={styles.textInput}
            ref={data[index]}
            editable={false}
            value={otp[index]}
            selectTextOnFocus={false}
            onFocus={() => handleFocus(index)}
            onBlur={handleBlur}
            selectionColor={theme.primaryPurple}
            typography={TYPOGRAPHY_TYPES.TITLE_1_SEMI_BOLD}
          />
        ) : otp.length == 0 ? (
          <Text style={styles.otpInputIndicator}>{'|'}</Text>
        ) : (
          ''
        )}
      </View>
    );
  };