reactjs - onPress でコンポーネントを呼び出すときのフックの無効な使用

Question

ヘッダーからボタンをクリックすると、モーダルを操作しようとしています。

このコンポーネント List があり、List がカスタム ナビゲーション オプションを使用しているとします。

import { CustomModal } from './components/Modal';

const List = (props) => {
  const [enteredUrl, setEnteredUrl] = useState('');

  const urlInputHandler = (enteredUrl) => {
    setEnteredUrl(enteredUrl);
  };

  const addUrlHander = () => {
    console.log(enteredUrl);
  }

  return (
    <View></View>
  );
};

List.navigationOptions = (navData) => {
  return {
    headerTitle: 'Workouts',
    headerRight: (
      <HeaderButtons HeaderButtonComponent={HeaderButton}>
        <Item
          title='Add'
          iconName='md-add'
          onPress={() => {
            CustomModal(); //here is the modal
          }}
        />
      </HeaderButtons>
    ),
    headerBackTitle: null
  };
};

私のモーダルコンポーネントにはこれがあります：

export const CustomModal = (props) => {
  const [modalVisible, setModalVisible] = useState(false);
  console.log(props);
  return (
    <Modal
      animationType='slide'
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
      }}
    >
      <View style={{ marginTop: 22 }}>
        <View>
          <Text>Hello World!</Text>

          <TouchableHighlight
            onPress={() => {
              setModalVisible(!modalVisible);
            }}
          >
            <Text>Hide Modal</Text>
          </TouchableHighlight>
        </View>
      </View>
    </Modal>
  );
}

しかし、無効なフックエラーが発生しています。私のnavigationOptionsのonPressがこれを私に与えているのはなぜですか? 私はこれを間違っていますか？