UI not rendering while useEffect fires - react-native

Question

I'm trying to get dynamic next page with Object.entries[currentTaskIndex], everything works great and i'm getting the task data based on their indexes , but useEffects not rendering UI when dependency changes, actually it's rendering same task as before ,so this mean when useState fire, currentTaskIndex state changes to 2 but it's stillshowing index 1 items, but when i refresh the page it's showing index 2 items,so the question is that, how can i show index 2 items while useEffects fire?
This is what i have:
const [isCorrect, setIsCorrect] = useState(false);
const [currentTaskIndex, setCurrentTaskIndex] = useState(0);
useEffect(() => {
const checkIfCorrect = newData.map((data) => {
....
});
}, [!isCorrect ? newItems : !newItems]);
// Filtered task
useEffect(() => {
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks(task);
});
});
});
});
}, [newData]);
useEffect(() => {
isCorrect && setCurrentTaskIndex((prev) => prev + 1);
setNewItems([]);
setIsCorrect(false);
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks((currTask) => [...currTask, task]);
});
});
});
});
}, [isCorrect]);
{filteredTasks.map((taskItems, i) => (
<View key={i}>
{taskItems.en?.map((enItems, i) => (
.....
))}
</View>

Answer 1

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically.
So, by adding just currentTaskIndex on dependency array your useEffect also re-render.
when you just put newData on dependency array its could not update UI because newData is not a state or Props.
Yes this is your solution:
// Filtered task
useEffect(() => {
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks(task);
});
});
});
});
}, [newData, currentTaskIndex]); <------

Answer 2

An finally fixed!
by just adding CurrentTaskIndex as dependency to Filtered task useEffects
// Filtered task
useEffect(() => {
const filterObject = newData.filter((data) => {
return data.map((dataItems) => {
return dataItems.map((tasks, i) => {
return Object.entries(tasks)[currentTaskIndex].map((task, i) => {
setFilteredTasks(task);
});
});
});
});
}, [newData, currentTaskIndex]); <------