How to pass an array to another screen React Native

I’m building this beginner react-native application that lists down its ongoing tasks and also allows users to delete and see the deleted tasks when needed. I was already able to show each task in one screen but I can’t figure out how to show my deleted tasks (through filter) into the second screen.

Below is the code that I have come up with.

This is the code of my App.tsx

import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import InputTasks from './screens/InputTasks';
import DeletedTasks from './screens/DeletedTasks';

const Stack = createNativeStackNavigator();

export default function App() {
return (
    <NavigationContainer>
    <Stack.Navigator
        screenOptions={{
        headerStyle: {
            backgroundColor: 'green',
        },
        headerTintColor: '#fff',
        }}>
        <Stack.Screen name="Home" component={InputTasks} />
        <Stack.Screen name="Message" component={DeletedTasks} />
    </Stack.Navigator>
    </NavigationContainer>
);

Here’s the code of my InputTasks.tsx

import { Button, StyleSheet, Text, TextInput,
    View, TouchableOpacity } from 'react-native';
import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/native';

const InputTasks = () => {
const [newTask, setNewTask] = useState({}); //add a task
const [taskList, setTaskList] = useState([]); //store all tasks in taskList arrat

//add the typed task by the user in taskList array
function addTodoHandler(){
    setTaskList([...taskList,newTask])

}

//change the status of task to 'deleted' so it can be shown in DeletedTasks screen
const deleteTask = (taskId)=>{
    const tasks = taskList.map((task)=>{
    if (task.id == taskId){
            task.status = 'deleted'
        }
        return task;
    })
    setTaskList([...tasks]);
}

const navigation = useNavigation();
const goToMessageScreen = () => {
    navigation.navigate('Message', {
    newTask,
    });
};


return (
    <View style={styles.container}>
        <View style={styles.contentContainer}>
            <View>
                <Text style={styles.sectionTitle}>TO-DO LIST</Text>
            </View>
            <View>
                {taskList.map((task)=>(
                <>
                    <View>
                        <View>
                            <Text key={task}>{task.activity}</Text>
                        </View>
                        <View>
                             <TouchableOpacity style={styles.deleteButton} onPress={()=>deleteTask(task.id)}>
                                <Text>Delete</Text>
                             </TouchableOpacity>
                        </View>
                    </View>
                </>
                ))}
            </View>
        </View>
        <View style={styles.taskWrapper}>
            <TextInput
                placeholder="Enter your message here"
                value={newTask}
                onChangeText={(enteredText) => setNewTask({id:taskList.length+1, activity:enteredText, status:'active'})}
                style={styles.input}
            />
            <Button title="Submit" onPress={goToMessageScreen} color="green" />
            <Button title="Add Task" onPress={addTodoHandler} color="green" />
        </View>
    </View>
);
};

export default InputTasks;

And finally here’s the code of my DeletedTasks.tsx
What I want to happen is to display my taskList array from InputTasks.tsx into this screen since I want to filter out the elements of this array and display all tasks with the status ‘deleted’ on them.

import { StyleSheet, Text, View } from 'react-native';
import React from 'react';
import { useRoute } from '@react-navigation/native';

const DeletedTasks = () => {
const route = useRoute();

return (
    <View style={styles.container}>
        <Text> </Text>
    </View>
);
};

export default DeletedTasks;