【React】ToDoリストの完了ボタンをタップして項目だけ打ち消し線が引かれるようにしたい

実現したいこと

当該コードはReact Native ですがロジック自体は関係がないためタイトルをReactにさせて頂きました。
現場のコードでは特定の項目のチェックボックス(完了ボタン)をタップしても全ての項目に打ち消し線が引かれてしまう状態ですが、これをタップした項目に適用できるようにしたいです

発生している問題・分からないこと

onPress={handlePress} のhandlePressの引数にindexを使用することは理解できます。
でもそのindexをどのように扱うべきなのか理解することができず...

該当のソースコード

import { registerRootComponent } from 'expo'; import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native'; import { Icon } from 'react-native-elements'; import { SwipeListView } from 'react-native-swipe-list-view'; const App = () => { const [task, setTask] = useState(''); const [tasks, setTasks] = useState([]); const [isPressed, setIsPressed] = useState(false); const addTask = () => { if (task.trim() !== '') { setTasks([...tasks, task]); setTask(''); } }; const removeTask = (index) => { const newTasks = [...tasks]; newTasks.splice(index, 1); setTasks(newTasks); }; const handlePress = () => { setIsPressed(!isPressed); }; return ( <View style={styles.container}> <View style={styles.inputContainer}> <TextInput style={styles.input} placeholder="タスクの追加" value={task} returnKeyType="done" onSubmitEditing={addTask} onChangeText={(text) => setTask(text)} /> </View> <SwipeListView data={tasks} keyExtractor={(index) => index.toString()} renderItem={({ item }) => ( <View style={styles.taskItem}> <Text style={isPressed ? styles.doneTaskItem : null}>{item}</Text> </View> )} renderHiddenItem={({ index }) => ( <View style={styles.hiddenItemContainer}> <TouchableOpacity style={[styles.taskButton, styles.doneButton]} onPress={handlePress}> <Icon name="done" size={20} color="white" /> </TouchableOpacity> <TouchableOpacity style={[styles.taskButton, styles.deleteButton]} onPress={() => removeTask(index)} > <Icon name="delete" size={20} color="white" /> </TouchableOpacity> </View> )} rightOpenValue={-100} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: 'white', }, inputContainer: { flexDirection: 'row', marginTop: 100, marginBottom: 10, }, input: { flex: 1, height: 40, borderWidth: 1, borderColor: 'gray', marginRight: 10, paddingHorizontal: 10, }, taskItem: { backgroundColor: 'white', justifyContent: 'center', height: 50, }, doneTaskItem: { color: 'gray', textDecorationLine: 'line-through', }, hiddenItemContainer: { flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', height: '100%', }, taskButton: { padding: 10, }, doneButton: { backgroundColor: 'gray', }, deleteButton: { backgroundColor: 'red', }, }); export default registerRootComponent(App);

DOMの当該のコード

1 <SwipeListView 2 data={tasks} 3 keyExtractor={(index) => index.toString()} 4 renderItem={({ item }) => ( 5 <View style={styles.taskItem}> 6 <Text style={isPressed ? styles.doneTaskItem : null}>{item}</Text> 7 </View> 8 )} 9 renderHiddenItem={({ index }) => ( 10 <View style={styles.hiddenItemContainer}> 11 <TouchableOpacity style={[styles.taskButton, styles.doneButton]} onPress={handlePress}> 12 <Icon name="done" size={20} color="white" /> 13 </TouchableOpacity> 14 <TouchableOpacity 15 style={[styles.taskButton, styles.deleteButton]} 16 onPress={() => removeTask(index)} 17 > 18 <Icon name="delete" size={20} color="white" /> 19 </TouchableOpacity> 20 </View> 21 )} 22 rightOpenValue={-100} 23 /> 24

const handlePress = () => { setIsPressed(!isPressed); };

試したこと・調べたこと

上記の詳細・結果

どのように期待する処理を実現できるかわかりませんでした

補足

特になし