javascript – Incremento continuo com onPressIn e onPressOut

Como consigo fazer um incremento continuo ao pressionar e ficar segurando o botão de adicionar?

A lógica que usei está adicionando somente se ficar tocando no botão mais de uma vez.

Tenho esse array de objetos e a propriedade amount tem que ir acrescentando:

const (products,setProducts) = useState<ProductProps()>((
    {
        group:'A',
        data:({ id:1, name:'Dell', amount:'9', total:15 })
    },
    {
        group:'B',
        data:({ id:2, name:'Iphone 7', amount:'7', total:15 }, { id:3, name:'Iphone 11', amount:'4', total:10 })
    }
));

renderizo utilizando um flatlist :

return (
    
    <FlatList
        data={data.data}
        keyExtractor={(item) => item.id}
        renderItem={({item,index})=> {
            return (
                <View style={styles.container} >
                    <View>
                        <Text style={styles.text}>
                            {item.name} 
                        </Text>
                    </View>
                    <View style={styles.areaButton}>
                        <TouchableOpacity
                           style={styles.button}
                           onPressIn={()=>decrement(item.id,item.amount,data.group)}
                           onPressOut={handlePressOut}     
                        >
                            <Text> - </Text>
                        </TouchableOpacity>
                            
                        <TextInput
                            placeholder="0"
                            style={styles.input}
                            onChangeText={(text)=>setAmount(text,item.id,item,data.group)}
                            value={item.amount}
                            keyboardType='numeric'
                        />
                                
                        <TouchableOpacity
                            style={styles.button} 
                            onPressIn={()=>increment(item.id,item.amount,data.group)}
                            onPressOut={handlePressOut}
                        >
                            <Text> + </Text>
                        </TouchableOpacity>  
                    </View>
                </View>
            )
        }}
    
    />
);

A lógica que estou usando é essa abaixo:

const (timer,setTimer) = useState<any>(null);

const increment = useCallback((id:string,value:string,group:string) => {
    const product = data.data?.map((item:any)=>
        item.id === id && Number(item.amount) < item.total
        ? {...item, amount:String(Number(value) + 1)}
        : item
    )
    
    const newProducts = products?.map(item => {
        return item.group === group 
            ? { group, data:product}
            : item
    })
    
    setProducts?.(newProducts!)
    setTimer(setTimeout(increment,200))
    
},())


const handlePressOut = useCallback(() =>{
    clearTimeout(timer)
},(timer))

inserir a descrição da imagem aqui