I’m trying to call EventList component in EventList screen

I got this error.

Type ‘{}’ is missing the following properties from type ‘EventAddProps’: navigation, routets(2739)
(alias) function EventList({ route, navigation }: EventAddProps): React.JSX.Element
import EventList

EventList.tsx

import {
StyleSheet,
Text,
View,
FlatList,
Pressable,
Button,
} from "react-native";
import { useState, useEffect } from "react";
import { getEvents, deleteEvent } from "../firebase/db";
import React from "react";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { StackParamList } from "../firebase/interface";
type EventAddProps = NativeStackScreenProps<StackParamList, "EventAdd">;

export default function EventList({ route, navigation }: EventAddProps) {
const [events, setEvents] = useState<any>([]);
useEffect(() => {
// const data =await getEvents();
// setEvents(data);
// console.log("DATA: " + JSON.stringify(data));

    fetchEvents();

}, []);
const fetchEvents = async () => {
try {
const eventData = await getEvents();
setEvents(eventData);
} catch (e) {}
};

const deleteAnEvent = async (id: string) => {
try {
await deleteEvent(id);
fetchEvents();
} catch (error) {
console.log("Delting err: " + error);
}
};

return (
<View>
<Text>EVENT LIST</Text>

      <View>
        <Button
          title="ADD EVENT"
          onPress={() => navigation.navigate("EventAdd", { id: "" })}
        ></Button>
        <FlatList
          data={events}
          keyExtractor={(item, index) => item.id}
          renderItem={({ item }) => (
            <View style={styles.items}>
              <View>
                <Text style={styles.title}>{item.name}</Text>
                <Text style={styles.title}>{item.date}</Text>
              </View>
              <Text style={styles.title}>{item.location}</Text>
              <View style={styles.pressable}>
                <Pressable
                  onPress={() =>
                    navigation.navigate("EventAdd", { id: item.id })
                  }
                >
                  <Text style={styles.textDone}>EDIT</Text>
                </Pressable>
                <Pressable onPress={() => deleteAnEvent(String(item.id))}>
                  <Text style={styles.textDelete}>DELETE</Text>
                </Pressable>
              </View>
            </View>
          )}
        />
      </View>
    </View>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: "2%",
flexDirection: "column",
},
items: {
backgroundColor: "#e4e7eb",
padding: 8,
marginVertical: 8,
marginHorizontal: 16,
flexDirection: "row",
justifyContent: "space-between",
},
title: {
fontSize: 16,
padding: 10,
},
pressable: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
padding: 10,
width: 120,
},
textDone: {
color: "#2ce84f",
fontSize: 14,
},
textDelete: {
color: "#e82c4b",
fontSize: 14,
},
});

EventListScreen.tsx

import { StyleSheet, Text, View } from "react-native";
import React from "react";
import EventList from "../components/EventList";
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { StackParamList } from "../firebase/interface";



const EventListScreen = () => {
  return (
    <View>
      <EventList />
    </View>
  );
};

export default EventListScreen;

const styles = StyleSheet.create({});