tenho seguinte código tauri rust react

use tauri::{command, AppHandle};
use tauri::Manager;
use tauri::Wry;
use tauri_plugin_store::{with_store, StoreCollection};
use serde_json::json;
use std::path::PathBuf;

// Bring in the encrypt_password module
mod encrypt_password;
use encrypt_password::{Credentials, hash_password, verify_password};

#[command]
async fn save_credentials(app: AppHandle<Wry>, username: String, password: String) -> Result<(), String> {
    let stores = app.state::<StoreCollection<Wry>>();
    let path = PathBuf::from("store.bin");

    // Hasheia a senha
    let hashed_password = hash_password(&password).map_err(|e| e.to_string())?;

    let credentials = Credentials {
        username: username.clone(),
        password_hash: hashed_password.clone(),
    };

    // Serializa as credenciais para JSON
    let credentials_json = json!(credentials);

    // Salva no store
    with_store(app.clone(), stores, path, |store| {
        store.insert("credentials".to_string(), credentials_json)?;
        store.save()?;
        Ok(())
    }).map_err(|e| e.to_string())?;

    Ok(())
}

#[command]
async fn load_credentials(app: AppHandle<Wry>) -> Result<Credentials, String> {
    let stores = app.state::<StoreCollection<Wry>>();
    let path = PathBuf::from("store.bin");

    let credentials = with_store(app.clone(), stores, path, |store| {
        let value = store.get("credentials").ok_or_else(|| {
            tauri_plugin_store::Error::Io(std::io::Error::new(
                std::io::ErrorKind::NotFound,
                "Credentials not found in store",
            ))
        })?;
        // Desserializa o valor de volta para Credentials
        let credentials: Credentials = serde_json::from_value(value.clone()).map_err(|e| {
            tauri_plugin_store::Error::Json(e)
        })?;
        Ok(credentials)
    }).map_err(|e| e.to_string())?;

    Ok(credentials)
}

#[command]
async fn verify_user_password(app: AppHandle<Wry>, username: String, password: String) -> Result<bool, String> {
    let credentials = load_credentials(app).await?;

    if credentials.username != username {
        return Ok(false);
    }

    let is_valid = verify_password(&credentials.password_hash, &password).map_err(|e| e.to_string())?;

    Ok(is_valid)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_store::Builder::default().build())
        .setup(|app| {
            // Realiza ações de configuração aqui
            let handle = app.handle();
            let stores = handle.state::<StoreCollection<Wry>>();
            let path = PathBuf::from("store.bin");

            with_store(handle.clone(), stores, path, |store| {
                // Exemplo: Inicializa valores padrão se eles não existirem
                if !store.has("credentials") {
                    // Define credenciais padrão ou deixa vazio
                    store.insert("credentials".to_string(), json!(null))?;
                    store.save()?;
                }
                Ok(())
            }).map_err(|e| e.to_string())?;

            Ok(())
        })
        .invoke_handler(tauri::generate_handler![
            save_credentials,
            load_credentials,
            verify_user_password
        ])
        .run(tauri::generate_context!())
        .expect("erro ao executar a aplicação Tauri");
}

Esse código salve e pega usuario do store, ae eu tenho o código react

import "./App.scss";
import { useState, useEffect, useCallback } from "react";
import { FaEye, FaEyeSlash, FaDiscord, FaInstagram, FaFacebook , FaGlobe } from "react-icons/fa";
import WindowButtons from './app/WindowsControls';
import Checkbox from 'material-web-components-react/checkbox';
import { app } from '@tauri-apps/api';

import logo from './assets/logo.png';
import logoName from './assets/logo_name.png';

// Definição da interface PasswordInputProps
interface PasswordInputProps {
  showPassword: boolean;
  password: string;
  handlePasswordChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  togglePasswordVisibility: () => void;
}

const PasswordInput = ({ showPassword, password, handlePasswordChange, togglePasswordVisibility }: PasswordInputProps) => (
  <div className="relative w-full mt-[8%] h-[32px]">
    <input  type={showPassword ? "text" : "password"}  value={password}  onChange={handlePasswordChange}  placeholder="Digite a sua senha..."
      className="w-full h-full bg-[#000B18]/[0.95] text-[12px] font-bold tracking-wider rounded-md placeholder-[#343d48] text-gray-500 pl-[10px] focus:text-gray-300 caret-slate-300 focus:outline-none"
      aria-label="Password"
    />
    {password && (
      <button type="button" onClick={togglePasswordVisibility} className="absolute right-2 top-1/2 transform -translate-y-1/2 text-white" aria-label={showPassword ? "Hide password" : "Show password"}>
        {showPassword ? <FaEyeSlash size={20} /> : <FaEye size={20} />}
      </button>
    )}
  </div>
);

const SocialLinks = () => (
  <div className="absolute bottom-[8%] w-full flex justify-center space-x-5">
    {[
      { href: "https://discord.com/invite/bkG2RPGjEu", icon: <FaDiscord size={30} />, label: "Discord", color: "text-blue-500" },
      { href: "https://www.instagram.com/ragnatales/?utm_source=siteragnatales", icon: <FaInstagram size={30} />, label: "Instagram", color: "text-pink-500" },
      { href: "https://www.facebook.com/ragnatalesprere/", icon: <FaFacebook size={30} />, label: "Facebook", color: "text-blue-600" },
      { href: "https://www.ragnatales.com.br/", icon: <FaGlobe size={30} />, label: "Website", color: "text-gray-500" }
    ].map(({ href, icon, label, color }) => (
      <a key={href} href={href} target="_blank" rel="noopener noreferrer" className={`${color} hover:scale-110 transform transition duration-300`} aria-label={label}>
        {icon}
      </a>
    ))}
  </div>
);

// Custom Hooks
function usePassword() {
  const [showPassword, setShowPassword] = useState(false);
  const [password, setPassword] = useState("");

  const togglePasswordVisibility = useCallback(() => {
    setShowPassword(prev => !prev);
  }, []);

  const handlePasswordChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  }, []);

  return { showPassword, password, togglePasswordVisibility, handlePasswordChange };
}

function useAppVersion() {
  const [appVersion, setAppVersion] = useState('');

  useEffect(() => {
    const fetchAppVersion = async () => {
      const version = await app.getVersion();
      setAppVersion(version);
    };
    fetchAppVersion();
  }, []);

  return appVersion;
}

// Componente Principal
function App() {
  const { showPassword, password, togglePasswordVisibility, handlePasswordChange } = usePassword();
  const [rememberPassword, setRememberPassword] = useState(false);
  const appVersion = useAppVersion();

  return (
    <div className="w-screen h-screen bg-cover bg-center bg-[url('./assets/bg.png')]">
      <img className="absolute top-5 left-5" src={logoName} alt="LogoName" loading="lazy" />
      <div data-tauri-drag-region className="absolute top-0 right-0 h-full w-[29%] bg-[#0E1622]/[0.85] border-l border-[#080E15]">
        <WindowButtons />
        <img className="absolute top-[8%] left-1/2 transform -translate-x-1/2" src={logo} alt="Logo" loading="lazy" />
        <div data-tauri-drag-region className="absolute top-[29%] left-1/2 transform -translate-x-1/2 w-[85%] h-[28%] flex flex-col items-center">
          <p className="text-[#FFFFFF] text-[16px] font-semibold tracking-widest">
            INICIAR SESSÃO
          </p>
          <input type="text" placeholder="Digite o seu usuário..." className="w-full mt-[8%] h-[32px] bg-[#000B18]/[0.95] text-[12px] font-bold tracking-wider rounded-md placeholder-[#343d48] text-gray-500 pl-[10px] focus:text-gray-300 caret-slate-300 focus:outline-none" aria-label="UserName"
          />
          <PasswordInput showPassword={showPassword} password={password} handlePasswordChange={handlePasswordChange} togglePasswordVisibility={togglePasswordVisibility}/>
          <div className="w-full mt-[8%] flex text-[12px] font-bold justify-between items-center">
            <label className="text-white flex items-center">
              <Checkbox className="scale-75" checked={rememberPassword} onChange={() => setRememberPassword(!rememberPassword)} />
              <span className="ml-2">Lembrar Conta</span>
            </label>
            <a href="#" className="text-[#1691CB]">
              Esqueceu a senha
            </a>
          </div>
        </div>
        <div className="absolute top-[61%] left-1/2 transform -translate-x-1/2 w-[85%] h-[12%] flex flex-col items-center">
          <button className="w-full h-[70%] bg-[#0C2A4E] text-white font-bold text-[14px] rounded-[6px] flex items-center justify-center">
            ENTRAR
          </button>
          <p className="absolute top-[76%] text-[12px] font-bold">
            <span className="text-white">Não possui uma conta? </span>
            <a href="#" className="text-[#1C94CC]">Cadastre-se</a>
          </p>
        </div>
        <SocialLinks />
        <div className="absolute bottom-[5px] right-[10px] text-white/[80%] text-xs font-semibold">
          v{appVersion}
        </div>
      </div>
    </div>
  );
}

export default App;

como posso colocar para salva o usuario e password no store.bin quando o checkbox rememberPassword estiver marcado, e preencher o usuario e senha quando o app abrir e rememberPassword estiver marcado