Access state value inside another function - useState - reactjs

Question

How can I access the updated value of the state? I am getting updated values on UI but not while accessing state value on the fly.
const OTP = () => {
const [counter, setCounter] = useState(3);
const [someState, setSomeState] = useState("something");
useEffect(() => {
startCountdownTimer();
}, []);
const countdownTimerFunc = () => {
let value = counter; // <--- initial value always
// someState <--- initial value always
console.log('==== countdown: START====', counter);
if (value && value > 0) {
setCounter(prev => prev - 1); // Updating right value
} else {
console.log('==== countdown: STOP====');
}
};
const startCountdownTimer = () => {
setSomeState("updated something");
internalID = BackgroundTimer.setInterval(() => {
countdownTimerFunc();
}, 1000);
};
const counterUI = () => {
return (
<Text>{counter}</Text>
)
}
...
return (
<View>
{counterUI()}
</View>
)
};
export default OTP;
Update: What is the right structure to access the state? Is it only with useEffect or can we handle with custom hook which will return state? The difficulty which am seeing in my structure to access the value inside seperate functions.

Answer 1

Please replace below code and let me know
const OTP = () => {
const [counter, setCounter] = useState(3);
const [someState, setSomeState] = useState("something");
useEffect(() => {
if (counter > 0) {
countdownTimerFunc()
}else{
startCountdownTimer();
}
}, [counter]);
const countdownTimerFunc = () => {
let value = counter; // <--- initial value always
// someState <--- initial value always
console.log('==== countdown: START====', counter);
if (value && value > 0) {
setCounter(counter - 1); // Updating right value
} else {
console.log('==== countdown: STOP====');
}
};
const startCountdownTimer = () => {
setSomeState("updated something");
setTimeout(() => {
countdownTimerFunc();
}, 1000);
};
const counterUI = () => {
return (
<Text>{counter}</Text>
)
}
...
return (
<View>
{counterUI()}
</View>
)
};
export default OTP;