I am trying to pass function from app.js to Deatails screen. but I keep getting this error(non-serializable values were found in navigation)

Expo Development Tools
,
1

I have textinput in the detail scree and a button when the user clicked on that button I want to add the text that user entered in flatlist on the first page
this is my app.js

function HomeScreen({ navigation }) {
  const [Note, setNote] = useState([]);
  const addNotes = (note) => {
    note.id == note.length + 1;
    setNote([...Note, note]);
  };

return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() =>
          navigation.navigate("Details", {
            addNotes,
          })
        }
  />
  <View>
    <FlatList
      data={Note}
      renderItem={({ item }) => {
        <Text>{item.Note}</Text>;
      }}
    />
  </View>
</View>

this is my DetailsScreen

function DetailsScreen({ route, navigation }) {
  const [notes, setNotes] = useState("");
  function Onadd() {
    route.params.addNotes({ notes });
    navigation.goBack();
  }
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>input Screen</Text>
      <View>
        <TextInput value={notes} onChangeText={setNotes} style={styles.input} />
      </View>
      <Text>{notes}</Text>
      <Button title="Go to HomeScreen" onPress={() => Onadd()} />
    </View>
  );
}