How to focus TextInput with unknown length of items in an array in React Native? There may be more or less items in the array coming from the database

Question

Basically I have done the focusing the TextInput while the items may be added in the cart or coming from the database. I am using useRef hooks, but when I delete some item or add I have got some error stating more render and less render when I delete or add some items in the cart.

This is cartItems array of having five items.

[
    {
        "isAddedToCart": true,
        "product_id": "1",
        "product_name": "PIN 36MM X 18IN",
        "quantity": 0,
        "unit": undefined
    },
    {
        "isAddedToCart": true,
        "product_id": "2",
        "product_name": "APIN 42MM X 24IN",
        "quantity": 0,
        "unit": undefined
    }, {
        "isAddedToCart": true,
        "product_id": "3",
        "product_name": "PIN 24MM X 10IN",
        "quantity": 0,
        "unit": undefined
    }, {
        "isAddedToCart": true,
        "product_id": "4",
        "product_name": "RAKAB 18MM X 24IN",
        "quantity": 0,
        "unit": "2"
    }
]

This is helper function I created.

    export const inputRef = (cartItems) => {
    const inputRefs = []
    cartItems.map((item, index) => {
        if(index != (cartItems.length-1)){
            inputRefs[index] = useRef(null);
        }        
    })

    return inputRefs;
    }

This is my TextInput

    <TextInput
    placeholder="Qty"
    placeholderTextColor="#676767"
    style={InputStyleWithoutBorder}
    onChangeText={(quantity) => inputQuantity(item.product_id, quantity, defaultUnit.default)}
    keyboardType={"numeric"}
    value={item.quantity}
    returnKeyType={inputRefs.length == index ? "done" : "next"}
    blurOnSubmit={inputRefs.length == index ? true : false}
    ref={index == 0 ? null : inputRefs[index-1]}
    onSubmitEditing={() => { 
            index == 0 || cartItems.length != index+1 ? inputRefs[index].current.focus() :null
            inputQuantity(item.product_id, item.quantity)
        }    
    }
    />

This is working fine until I add or remove some items from the cart. Focusing is working fine.

This is the item which can be deleted or can add later from the list of items

This is the error when I delete items in the cart

This is the error when I add items in the cart

Answer 1

export const inputRef = (cartItems) => {
    const inputRefs = []
    cartItems.map((item, index) => {
        if(index != (cartItems.length-1)){
            inputRefs[index] = createRef(null);
        }        
    })
    return inputRefs;
}

This solution is working fine.