Изменение видимости от navigationOptions в React Native с помощью хуков

Question

Код:

import React, { useState, useEffect } from "react";
import {
  View,
  StyleSheet,
  Text,
  Modal
from 'react-native';
import { SimpleLineIcons, Feather } from "@expo/vector-icons";
import { FlatList } from "react-native-gesture-handler";
import Menu, { MenuItem, MenuDivider } from "react-native-material-menu";

const NotificationScreen = ({ navigation }) => {

   const [serialModalVisible, setSerialModalVisible] = useState(false);

   const filterSerial = () => {
     setSerialModalVisible(!serialModalVisible);
   };

  useEffect(() => {
    navigation.setParams({
      filterSerial
    });
  }, []);

  useEffect(() => {
    console.log("serial modal changed: " + serialModalVisible);
  }, [serialModalVisible]);

  return (
     <View>
        <Modal
          animationType='fade'
          transparent={true}
          visible={serialModalVisible}>
          <View style={styles.serialModalView}>
            <TouchableOpacity
              onPress={() => {
                setSerialModalVisible(false);
              }}>
              <Text style={styles.serialModal}>Close Modal</Text>
            </TouchableOpacity>
          </View>
        </Modal>
    </View>
  );
};

NotificationScreen.navigationOptions = ({ navigation }) => {
  return {
    headerLeft: () => (
      <View style={styles.menuView}>
        <Menu
          ref={navigation.getParam("setMenuRef")}
          button={
            <TouchableOpacity onPress={navigation.getParam("showMenu")}>
              <Feather name='filter' size={30} style={styles.menuIconLeft} />
            </TouchableOpacity>
          }>
          <MenuItem onPress={navigation.getParam("filter24Hours")}>
            Filter Last 24 Hours
          </MenuItem>
          <MenuItem onPress={navigation.getParam("filterSerial")}>
            Filter By Serial Number
          </MenuItem>
          <MenuItem onPress={navigation.getParam("clearFilters")}>
            Clear Filters
          </MenuItem>
        </Menu>
      </View>
    ),
    headerTitle: "Notifications",
    headerTitleStyle: { color: "white", letterSpacing: 2 },
    headerTransparent: true
  };
};

export default NotificationScreen;

Я не знаю, где проблема, когда я выбираю серийный фильтр из выпадающего меню, модальное изображение не появляется. Консольное утверждение говорит, что это правда после того, как я выбрал серийный фильтр

Я подозреваю, что это как-то связано с навигационными параметрами, которые не получают правильное значение или что-то в этом роде, я - нуб React Native и не уверен, как это работает. Я проверил многочисленные таблицы данных.

Любое руководство приветствуется.