Как использовать переменную useState в StackNavigator

Question

Я получаю список категорий через крючок useEffect:

useEffect(() => {
fetch(
  `/read.php?catId=${catId}`
)
  .then(res => res.json())
  .then(res => {
    setProducts([...products, ...res.data]);
  });
}, []);

и сохраняю данные в крюке useState

const [products, setProducts] = useState([]);

Используемый {catId}в URL перенаправляется через routeName с предыдущего экрана, и я получаю его с getParam следующим образом:

const catId = props.navigation.getParam("categoryId");

Это прекрасно работает внутри функционального компонента. Проблема в том, что мне также нужны реквизиты переменной 'products' в моем StackNavigator. Поэтому я попытался использовать функцию navigationData для navigationOptions, еще раз getParam и использовать метод find для переменной products:

CategoryProductsScreen.navigationOptions = navigationData => {
  const catId = navigationData.navigation.getParam("categoryId");

  const selectedCategory = products.find(cat => cat.id === catId);

  return {
    headerTitle: selectedCategory.category_name
  };
};

К сожалению, переменная 'products' недоступна за пределами функционального компонента. Я также не могу использовать useEffect извне для повторного извлечения моих данных, очевидно.

Есть ли способ получить данные из моей переменной useState в StackNavigator? Спасибо