How to prevent setInterval from clearing the counter - react-native

Question

I'm struggling in using setInterval on react native with hooks;
I've seen some materials about it online and I'm using this custom hook which uses the state counter to display the current element from the array, overtime the counter is increased but it goes blank after it's done with the life cycle of setInterval;
How can I set it to leave it at the latest value or resetting to the first once it's done?
Also the reset button bugs sometimes, it tries to reset, but then come back stopped at the previous position, Am I doing something wrong?
My code so far:
const SensorsDetail = ({ evaluation }) => {
const [ state ] = useState(evaluation);
const [count, setCount] = useState(0)
const [running, setRunning] = useState(false)
const cb = useRef()
const id = useRef()
const start = () => setRunning(true)
const pause = () => setRunning(false)
const reset = () => {
setRunning(false)
setCount(0)
}
function callback () {
setCount(count + 1)
}
// Save the current callback to add right number to the count, every render
useEffect(() => {
cb.current = callback
})
useEffect(() => {
// This function will call the cb.current, that was load in the effect before. and will always refer to the correct callback function with the current count value.
function tick() {
cb.current()
}
if (running && !id.current) {
id.current = setInterval(tick, 250)
}
if (!running && id.current) {
clearInterval(id.current)
id.current = null
}
return () => id.current && clearInterval(id.current)
}, [running])
return(
<View style={styles.view}>
<Card>
<Text style={styles.text}>{state.dados_sensor_1[count]}</Text>
</Card>
<Card>
<Text style={styles.text}>{state.dados_sensor_2[count]}</Text>
</Card>
<Card>
<Text style={styles.text}>{state.dados_sensor_3[count]}</Text>
</Card>
<Card>
<Text style={styles.text}>{state.dados_sensor_4[count]}</Text>
</Card>
<TouchableOpacity onPress={start} style={styles.buttonStyle}>
<Text style={styles.textStyle2}>
Start
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={pause} style={styles.buttonStyle}>
<Text style={styles.textStyle2}>
Pause
</Text>
</TouchableOpacity>
<TouchableOpacity onPress={reset} style={styles.buttonStyle}>
<Text style={styles.textStyle2}>
Reset
</Text>
</TouchableOpacity>
</View>
);
};

Answer 1

This is silly but after studying more about it, I saw that actually what was happening was that the counter was moving past the array size, that's why it was showing blank values;
I just add a limit to value the counter could raise and it's working just fine;
The reset though is still bugging sometimes...
this is the code for the custom hook:
import { useState, useEffect, useRef } from 'react';
export default (initialCount, finalCount, autoStart) => {
const [count, setCount] = useState(initialCount)
const [running, setRunning] = useState(autoStart)
const cb = useRef()
const id = useRef()
const start = () => {
if (count < finalCount){
setRunning(true)
}
}
const pause = () => setRunning(false)
const reset = () => {
setRunning(false);
setCount(initialCount)
}
function callback () {
setCount(count + 1)
if (count == finalCount){
setRunning(false)
}
}
useEffect(() => {
cb.current = callback
})
useEffect(() => {
function tick() {
cb.current()
}
if (running && !id.current) {
id.current = setInterval(tick, 250)
}
if (!running && id.current) {
clearInterval(id.current)
id.current = null
}
return () => id.current && clearInterval(id.current)
}, [running])
return {
count,
start,
pause,
reset
}
};