【React Navigation】useEffect内で定義したヘッダーオプションを更新できるようにしたい

Question

前提・実現したいこと

Cloud Firestoreと連携してリストを表示するアプリを作っています。

現在、ReactNavigationのStackNavigatorを使ってヘッダーを作っているところです。
ヘッダー右部にスイッチとアイコンを設置する予定で、機能は

　スイッチ：リストのモードを切り替える（仮にAモード・Bモードとします）
アイコン：アプリのログアウト（Firestoreのリアルタイム連携を停止）

です。
画面の概形は以下のような感じです。青部分がリストで、モードによって表示内容が変わります。

発生している問題・エラーメッセージ

スイッチをタップしたとき、リストは切り替わるがスイッチのON/OFFが正常に切り替わりません。

例えば、Aモード（OFF）からBモード(ON)に切り替えるとき

• スイッチをタップする
• スイッチがONになる
• 少し時間をおいて、リストがBモードになる
• スイッチがOFFに戻る（リストはBモードを維持）

という挙動です。

該当のソースコード

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text, Alert } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Switch } from 'react-native-paper';
import { getAuth, onAuthStateChanged } from '@firebase/auth';
import {
  getFirestore,
  collection,
  onSnapshot,
  where,
  orderBy,
  limit,
  query,
} from 'firebase/firestore';

// ローディング中を表示するコンポーネント
import Loading from '../components/Loading';
// 画面概形の青部分に当たるリスト
import ShareList from '../components/ShareList';
// アプリからログアウトするボタン
import LogoutButton from '../components/LogoutButton';


export default function ShareListScreen({ navigation }) {
  // Aモードのリスト(list:リストデータ, loading:ローディン中ならtrue)
  const [shareListState, setShareListState] = useState({
    list: [],
    loading: false,
  });
  // Bモードのリスト(list:リストデータ, loading:ローディン中ならtrue)
  const [okawariListState, setOkawariListState] = useState({
    list: [],
    loading: false,
  });
  // Aモードならfalse, Bモードならtrue
  const [listModeSwitched, setListModeSwitched] = useState(true);

  // スイッチをタップした時の処理
  const toggleSwitch = () => {
    setListModeSwitched((prev) => !prev);
  };

  useEffect(() => {
    // 各モードのリストをローディング中に設定
    setShareListState((prev) => ({ ...prev, loading: true }));
    setOkawariListState((prev) => ({ ...prev, loading: true }));

    // クリーンアップ関数
    const cleanupFuncs = {
      auth: () => {},
      shareList: () => {},
      okawariList: () => {},
    };

    cleanupFuncs.auth = onAuthStateChanged(getAuth(), (user) => {
      if (user) {
        // Aモードのリストのスナップショット取得（取得完了時にローディングをfalseに設定）
        cleanupFuncs.shareList = onSnapshot( ... );
        // Bモードのリストのスナップショット取得（取得完了時にローディングをfalseに設定）
        cleanupFuncs.okawariList = onSnapshot( ... );
      }

      // ヘッダーオプション
      navigation.setOptions({
        headerRight: () => (
          <View style={styles.headerRightContainer}>
            <View style={styles.listModeSwitchFrame}>
              <MaterialCommunityIcons
                name='rice'
                size={24}
                color='#000000'
                style={styles.listModeSwitchIcon}
              />
              <Switch value={listModeSwitched} onValueChange={toggleSwitch} />
            </View>
            <View style={styles.lougoutButtonFrame}>
              {/* ログアウト時にクリーンアップ関数を実行させるため、propsで渡している */}
              <LogoutButton cleanupFuncs={cleanupFuncs} />
            </View>
          </View>
        ),
      });
    });

    return () => {
      cleanupFuncs.auth();
      cleanupFuncs.shareList();
      cleanupFuncs.okawariList();
    };
  }, []);

  if (listModeSwitched) {
    // Bモードで表示
  } else {
    // Aモードで表示
  }
}

const styles = StyleSheet.create({ ... });

考えられる原因

useEffect内でヘッダーオプションを設定しているのが原因だと考えています。
スイッチがもとに戻ってしまう現象は、DOMマウント後１度だけ実行されるuseEffect時のスイッチの状態（
<Switch value={false} onValueChange={toggleSwitch} />）が保持されているためと予想しています。

試したこと

・クリーンアップ関数をuseStateで保持して、toggleSwitch関数内でヘッダーオプションを再設定
⇒改善されず

・useEffectの実行をlistModeSwitched依存に変更
⇒スイッチを切り替えるたびにスナップショット取得が実行されて、動作が非常に遅くなってしまう

質問したいこと

①ヘッダーオプションをuseEffectで定義する状態のまま、スイッチの動作が想定通りになる方法があればお聞きしたいです。

②headerRightを一度で定義せずあとからコンポーネントを追加できるような方法はあるのでしょうか。
（useEffectでログアウトボタン追加、他の部分でスイッチ追加　のように）

補足情報（FW/ツールのバージョンなど）

react : 17.0.1
react-native : 0.64.3
@react-navigation/native : 6.0.6
@react-navigation/stack : 6.0.11
react-native-paper : 4.11.1