tenho seguinte código tauri v2 rust

use serde::{Deserialize, Serialize};
use std::path::{Path, PathBuf};
use tauri::{AppHandle, Emitter};
use reqwest::Client;
use tokio::fs;
use tokio::io::AsyncWriteExt;
use std::time::{Duration, Instant};

#[derive(Deserialize, Clone)]
struct PatchEntry {
    file_name: String,
}

#[derive(Serialize, Clone)]
struct DownloadInfo {
    current_file: usize,
    total_files: usize,
    file_name: String,
    downloaded_bytes: u64,
    total_bytes: u64,
}

#[derive(Serialize, Clone)]
struct DownloadStatus {
    status: String,
    additional_info: Option<String>,
}

async fn get_exe_dir() -> Result<PathBuf, std::io::Error> {
    tokio::task::spawn_blocking(|| {
        std::env::current_exe()?.parent()
            .map(|p| p.to_path_buf())
            .ok_or_else(|| std::io::Error::new(
                std::io::ErrorKind::Other,
                "Não foi possível determinar o diretório do executável",
            ))
    }).await?
}

async fn dir_exists(path: &Path) -> Result<bool, std::io::Error> {
    match fs::metadata(path).await {
        Ok(metadata) => Ok(metadata.is_dir()),
        Err(err) if err.kind() == std::io::ErrorKind::NotFound => Ok(false),
        Err(err) => Err(err),
    }
}

async fn read_patch_file(path: &Path) -> Result<Vec<PatchEntry>, String> {
    let content = fs::read_to_string(path).await.map_err(|e| e.to_string())?;
    let patches: Vec<PatchEntry> = serde_json::from_str(&content).map_err(|e| e.to_string())?;
    Ok(patches)
}

async fn emit_download_status(
    app_handle: &AppHandle,
    status: &str,
    additional_info: Option<String>,
) -> Result<(), String> {
    app_handle.emit("download_status", DownloadStatus {
        status: status.to_string(),
        additional_info,
    }).map_err(|e| e.to_string())
}

async fn download_file(
    app_handle: &AppHandle,
    client: &Client,
    entry: &PatchEntry,
    download_dir: &Path,
    current_file: usize,
    total_files: usize,
) -> Result<(), String> {
    let url = format!("https://hil-speed.hetzner.com/{}", entry.file_name);
    let file_path = download_dir.join(&entry.file_name);

    let mut response = client.get(&url).send().await.map_err(|e| e.to_string())?;
    if !response.status().is_success() {
        return Err(format!("Falha ao baixar '{}': HTTP {}", entry.file_name, response.status()));
    }

    let total_bytes = response.content_length().unwrap_or(0);
    let mut file = fs::File::create(&file_path).await.map_err(|e| e.to_string())?;

    let mut downloaded_bytes = 0u64;
    let start_time = Instant::now();

    emit_download_status(app_handle, "downloading", Some(entry.file_name.clone())).await?;

    let mut last_emit_time = Instant::now();

    while let Some(chunk) = response.chunk().await.map_err(|e| e.to_string())? {
        file.write_all(&chunk).await.map_err(|e| e.to_string())?;
        downloaded_bytes += chunk.len() as u64;

        let now = Instant::now();
        if now.duration_since(last_emit_time) >= Duration::from_millis(100) {
            let elapsed = start_time.elapsed().as_secs_f64();
            let speed = if elapsed > 0.0 {
                downloaded_bytes as f64 / elapsed
            } else {
                0.0
            };

            app_handle.emit("download_info", DownloadInfo {
                current_file,
                total_files,
                file_name: entry.file_name.clone(),
                downloaded_bytes,
                total_bytes,
            }).map_err(|e| e.to_string())?;
            app_handle.emit("download_speed", speed).map_err(|e| e.to_string())?;
            last_emit_time = now;
        }
    }

    // Emitir status de download concluído para o arquivo atual
    emit_download_status(app_handle, "file_completed", Some(entry.file_name.clone())).await?;

    Ok(())
}

async fn check_server_connection(client: &Client, url: &str) -> Result<(), String> {
    let response = client.get(url).send().await.map_err(|e| e.to_string())?;
    if response.status().is_success() {
        Ok(())
    } else {
        Err(format!("Falha ao conectar ao servidor: HTTP {}", response.status()))
    }
}

#[tauri::command]
pub async fn start_downloads(app_handle: AppHandle) -> Result<(), String> {
    // Obter o diretório do executável
    let exe_dir = get_exe_dir().await.map_err(|e| e.to_string())?;

    // Definir caminhos
    let patch_file_path = exe_dir.join("patch.json");
    let download_dir = exe_dir.join("patchs");

    // Verificar se o diretório de download existe, criar se não existir
    if !dir_exists(&download_dir).await.map_err(|e| e.to_string())? {
        fs::create_dir_all(&download_dir).await.map_err(|e| e.to_string())?;
    }

    // Ler os patches do arquivo JSON
    let patches = read_patch_file(&patch_file_path).await?;

    let client = Client::new();
    let total_files = patches.len();

    // Emitir status de conexão
    emit_download_status(&app_handle, "connecting", None).await?;

    let server_url = "https://hil-speed.hetzner.com/";
    if let Err(err) = check_server_connection(&client, server_url).await {
        let error_message = format!("Erro ao conectar ao servidor: {}", err);
        eprintln!("{}", error_message);
        emit_download_status(&app_handle, "error", Some(error_message.clone())).await?;
        return Err(error_message);
    }

    // Emitir status de conexão bem-sucedida
    emit_download_status(&app_handle, "connected", None).await?;

    // Executar downloads sequencialmente, um arquivo por vez
    for (idx, entry) in patches.iter().enumerate() {
        let current_file = idx + 1;
        if let Err(err) = download_file(&app_handle, &client, entry, &download_dir, current_file, total_files).await {
            let error_message = format!("Erro ao baixar '{}': {}", entry.file_name, err);
            eprintln!("{}", error_message);
            emit_download_status(&app_handle, "error", Some(error_message.clone())).await?;
            // Interrompe o processo em caso de erro
            return Err(error_message);
        }
    }

    // Emitir status de todos os downloads concluídos
    emit_download_status(&app_handle, "completed", None).await?;

    Ok(())
}

no react eu tenho

import { useEffect, useState } from "react";
import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api/core";


function formatBytes(bytes: number) {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  const value = bytes / Math.pow(k, i);
  return `${value.toFixed(2)} ${units[i]}`;
}

interface DownloadStatus {
  status: string;            // Exemplo: "connecting", "downloading", "completed", "error"
  additional_info?: string;  // Informações adicionais, como o nome do arquivo ou mensagem de erro
}

interface DownloadInfo {
  current_file: number;
  total_files: number;
  file_name: string;
  downloaded_bytes: number;
  total_bytes: number;
}

const DownloadManager = () => {
  const [message, setMessage] = useState("");
  const [currentFile, setCurrentFile] = useState(0);
  const [totalFiles, setTotalFiles] = useState(0);
  const [fileName, setFileName] = useState("");
  const [downloadedBytes, setDownloadedBytes] = useState(0);
  const [totalBytes, setTotalBytes] = useState(0);
  const [isDownloading, setIsDownloading] = useState(false);
  const [downloadSpeed, setDownloadSpeed] = useState(0);

  useEffect(() => {
    let unlistenStatus: (() => void) | null = null;
    let unlistenInfo: (() => void) | null = null;
    let unlistenSpeed: (() => void) | null = null;

    (async () => {
      unlistenStatus = await listen<DownloadStatus>("download_status", (event) => {
        const { status, additional_info } = event.payload;
        let newMessage = '';

        switch (status) {
          case 'connecting':
            newMessage = 'Conectando ao servidor...';
            break;
          case 'connected':
            newMessage = 'Conexão estabelecida com sucesso. Iniciando download...';
            break;
          case 'downloading':
            newMessage = `Baixando ${additional_info || ''}`;
            break;
          case 'file_completed':
            newMessage = `Download do arquivo concluído: ${additional_info || ''}`;
            break;
          case 'completed':
            newMessage = 'Todos os downloads foram concluídos com sucesso.';
            break;
          case 'error':
            newMessage = `Erro: ${additional_info || 'Ocorreu um erro'}`;
            break;
          default:
            newMessage = 'Status desconhecido';
        }

        setMessage(newMessage);

        if (status === 'downloading') {
          setIsDownloading(true);
          setFileName(additional_info || '');
        } else if (status === 'completed' || status === 'error') {
          setIsDownloading(false);
        }
      });

      unlistenInfo = await listen<DownloadInfo>("download_info", (event) => {
        const {
          current_file,
          total_files,
          file_name,
          downloaded_bytes,
          total_bytes,
        } = event.payload;

        setCurrentFile(current_file);
        setTotalFiles(total_files);
        setFileName(file_name);
        setDownloadedBytes(downloaded_bytes);
        setTotalBytes(total_bytes);
      });

      unlistenSpeed = await listen<number>("download_speed", (event) => {
        const speedInBytes = event.payload;
        setDownloadSpeed(speedInBytes);
      });
    })();

    return () => {
      if (unlistenStatus) unlistenStatus();
      if (unlistenInfo) unlistenInfo();
      if (unlistenSpeed) unlistenSpeed();
    };
  }, []);

  const startDownload = async () => {
    if (isDownloading) return;
    setIsDownloading(true);

    // Resetar o estado ao iniciar um novo download
    setMessage("");
    setCurrentFile(0);
    setTotalFiles(0);
    setFileName("");
    setDownloadedBytes(0);
    setTotalBytes(0);
    setDownloadSpeed(0);

    try {
      await invoke("start_downloads");
    } catch (error) {
      setMessage(`Erro ao iniciar o download: ${error}`);
      setIsDownloading(false);
    }
  };

  const progressPercent =
    totalBytes > 0 ? (downloadedBytes / totalBytes) * 100 : 0;

  return (
    <>
      <div className="absolute bottom-20 rounded-lg w-[71%] h-[8%] flex flex-col justify-between items-center">
        <button onClick={startDownload} className="bg-blue-500 text-white rounded p-2 mb-2">
          Iniciar Download
        </button>
      </div>
      <div className="absolute bottom-3 rounded-lg w-[71%] h-[8%] flex flex-col justify-between items-center">
        <div className="w-full flex items-center">
          <p className="text-[14px] font-bold text-opacity-[0.95] text-white flex-grow text-center">
            {message}
            {isDownloading && totalFiles > 0 && (
              <span className="mx-1">( {currentFile} / {totalFiles} )</span>
            )}
            {isDownloading && fileName && (
              <>
                : <span className="text-orange-500">{fileName}</span>
                <span className="mx-1">( <span className="text-green-600">{formatBytes(downloadedBytes)}</span> / {formatBytes(totalBytes)} )</span>
              </>
            )}
          </p>
        </div>
        {isDownloading && (
          <div className="w-[30%] absolute h-6 flex justify-end items-center right-6 top-2">
            <span className="text-[11px] font-bold text-opacity-[0.95] text-yellow-600 text-right">
              {formatBytes(downloadSpeed)}ps
            </span>
          </div>
        )}
        <div className="w-[95%] bg-[#0E1622]/[0.95] text-green-600 rounded-md h-6 flex items-center shadow-inner shadow-gray-800">
          <div
            className="bg-[#1164CA]/[0.95] ml-1 rounded-md h-4"
            style={{ width: `${progressPercent}%` }}
          />
        </div>
      </div>
    </>
  );
};

export default DownloadManager;

Em vez de usar nome para mensagens não seria melhor usar id ?
também mova o speed para o downloadinfo