tenho o seguinte código react

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]}`;
}

enum DownloadStatusType {
  Connecting = 'Connecting',
  Connected = 'Connected',
  Downloading = 'Downloading',
  Completed = 'Completed',
  Error = 'Error',
}

interface DownloadStatus {
  status: DownloadStatusType;
  additional_info?: string;
}

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 DownloadStatusType.Connecting:
            newMessage = 'Conectando ao servidor...';
            break;
          case DownloadStatusType.Connected:
            newMessage = 'Conexão estabelecida com sucesso. Iniciando download...';
            break;
          case DownloadStatusType.Downloading:
            newMessage = 'Baixando';
            break;
          case DownloadStatusType.Completed:
            newMessage = 'Todos os downloads foram concluídos com sucesso.';
            break;
          case DownloadStatusType.Error:
            newMessage = `Erro: ${additional_info}`;
            break;
          default:
            newMessage = 'Status desconhecido';
        }

        setMessage(newMessage);

        if (status === DownloadStatusType.Downloading) {
          setIsDownloading(true);
        } else if (status === DownloadStatusType.Completed || status === DownloadStatusType.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);
      });

      // Escutar as atualizações de velocidade de download
      unlistenSpeed = await listen<number>("download_speed", (event) => {
        setDownloadSpeed(event.payload);
      });
    })();

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

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

    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 =
    downloadedBytes > 0 && 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)}/s
            </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;

quando message for igual DownloadStatusType.Downloading só deve ser exibida junto com currentFile} / {totalFiles