react use-states are not updating, in stack navigator header right component. react navigation

react use-states are not updating, in stack navigator header right component. react navigation

Example:

  const [count, setCount] = useState(0)

  useLayoutEffect(() => {
    const stackRef = navigation;
    stackRef.setOptions({
      headerRight: () => <SubmitButton />,
    });
  }, []);

  const SubmitButton = () => {
    return (
      <Text>count: {count}</Text> // <--- count is not updating and the value is 0
    );
  };

  return(
    <Button onPress={()=>{setCount(count+1)} />
  )