Hello dear stackoverflow users. I'm learning React native but there is something I can't do. I am developing a todo application where I keep a state called completeTodo to mark the todo as done and when my todo component is onpress I reverse it but it affects all todo what can I do to solve it?

I used nativewind for css in this project. nativewind react is the same tailwindcss developed for native.

My app.js file

import { StatusBar } from 'expo-status-bar';
import { useState, React } from 'react';
import { StyleSheet, FlatList, ScrollView, SafeAreaView, Text, View, TextInput, TouchableOpacity, Platform, Keyboard } from 'react-native';
import { useColorScheme } from "nativewind";
import Task from './components/Task.js'
import KeyboardAvoidingView from 'react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js';
import Pressable from 'react-native/Libraries/Components/Pressable/Pressable.js';

export default function App() {
  const { colorScheme, toggleColorScheme } = useColorScheme();
  const [task, setTask] = useState()
  const [isCompleted, setIsCompleted] = useState(false)
  const [taskItems, setTaskItems] = useState([])

  const addTask = () => {
    Keyboard.dismiss()
    setTaskItems([...taskItems, task])
    setTask(null)
  }
 
  const deleteTask = () => {

  }
  const updateTask = () => {

  }
  return (
    <SafeAreaView className="bg-gray-500/20 flex-1 dark:bg-black/90 overflow-auto">
      <View className="w-full sticky top-0 left-0 flex items-end px-5 h-10 justify-center">
        <TouchableOpacity onPress={toggleColorScheme}>
          <Text className="dark:text-white">
            {colorScheme === "dark" ? `