Как передать анимированное значение в компонент заголовка навигации?

Question

На одном из моих экранов у меня есть ScrollView, и при прокрутке он анимирует заголовок навигации. в моем файле экрана у меня есть что-то вроде этого.

const translationY = new Value(0);

const headeropacity = interpolate(translationY, {
  inputRange: [0, 300, 500],
  outputRange: [0, 1, 1],
  extrapolate: Extrapolate.CLAMP
});

/* I need to pass to the navigation header */
React.useEffect(() => {
  navigation.setParams({
    opacity: headerOpacity,
  });
}, [navigation, headerOpacity]);

И в моем файле пользовательского заголовка

const opacity = scene.route.params.opacity;

return (
  <MyCustomHeader style={{opacity}} />
)

И я ожидал (?) Я получил ошибку.

Превышена максимальная глубина обновления. Это может произойти, когда компонент вызывает setState внутри useEffect, но useEffect либо не имеет массива зависимостей, либо одна из зависимостей изменяется при каждом рендеринге

Как передать анимированное значение на другой экран ( страница) правильно?