[Fix/Update] FIx OSC availability handling and integrate into UI components.

src-ui/views/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -1,7 +1,11 @@
 import { useI18n } from "@useI18n";
 import styles from "./Others.module.scss";
 
-import { useOpenFolder } from "@logics_common";
+import {
+    useOpenFolder,
+    useIsOscAvailable,
+} from "@logics_common";
+
 import {
     useOthers,
 } from "@logics_configs";
@@ -104,18 +108,14 @@ const AutoExportMessageLogsContainer = () => {
 export const VrcMicMuteSyncContainer = () => {
     const { t } = useI18n();
     const { currentEnableVrcMicMuteSync, toggleEnableVrcMicMuteSync } = useOthers();
-
-    const variable = {
-        state: currentEnableVrcMicMuteSync.state,
-        data: currentEnableVrcMicMuteSync.data.is_enabled,
-    };
+    const { currentIsOscAvailable } = useIsOscAvailable();
 
     return (
         <CheckboxContainer
             label={t("config_page.others.vrc_mic_mute_sync.label")}
             desc={t("config_page.others.vrc_mic_mute_sync.desc")}
-            variable={variable}
-            is_available={currentEnableVrcMicMuteSync.data.is_available}
+            variable={currentEnableVrcMicMuteSync}
+            is_available={currentIsOscAvailable.data}
             toggleFunction={toggleEnableVrcMicMuteSync}
         />
     );