如何根据状态更新react导航5 headerRight中的文本？

import React, { useState } from 'react';

const MyComponent = () => {
  const [headerText, setHeaderText] = useState('初始文本');

  // 其他组件代码...

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            headerRight: () => (
              <Text>{headerText}</Text>
            ),
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default MyComponent;

const updateHeaderText = () => {
  setHeaderText('更新后的文本');
};

<Button title="更新文本" onPress={updateHeaderText} />