How do I iterate through Textinput in React Native useRef with typescript

Question

I have a Textinput that will be divided into 4 password entries. What I need is:

1 - Adding a number automatically switches to the next focus entry;

2 - when I delete the entry, I go back to the previous entry

3 - in any of the entries if I edit I have to change the value in the state

4 - store this data as a include when editing in useState and if you change them, modify them in position.

The code I have I can go back and forth, but it hangs because of pop () and I can’t change the value in position. More about the original text

const pinRef = useRef([]);

  pinRef.current = [0, 0, 0, 0].map(
    (_, index) => (pinRef.current[index] = React.createRef()),
  );

const handleCopyUsername = (value, index) => {
    const next = pinRef.current[index + 1];
    const back = pinRef.current[index - 1];

    if (value) {
      setSecurityPin((prev) => [...prev, value]);
    }

    if (value && next) {
      next.focus();
    }

    if (value === '' && back) {
      back.focus();
      const newPin = securityPin.pop();
      setSecurityPin(newPin);
    }
  };

 <Recharge>
        {[0, 1, 2, 3].map((input, index) => (
          <TextInput
            key={String(index)}
            ref={(pin) => {pinRef.current[index] = pin}
            keyboardType="numeric"
            secureTextEntry={!visiblePass}
            maxLength={1}
            onChangeText={(event) => handleCopyUsername(event, index)}
          />
        ))}