diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index 67b8960..d4b60c7 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -239,7 +239,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
       } else if (files.length > 1) {
         setTotalGenerating(true)
 
-        const toastId = toast.loading(DownloadingToast(router))
+        const toastId = toast.loading(<DownloadingToast router={router} />)
         downloadMultipleFiles({ toastId, router, files, folder })
           .then(() => {
             setTotalGenerating(false)
@@ -278,7 +278,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
       })()
 
       setFolderGenerating({ ...folderGenerating, [id]: true })
-      const toastId = toast.loading(DownloadingToast(router))
+      const toastId = toast.loading(<DownloadingToast router={router} />)
 
       downloadTreelikeMultipleFiles({
         toastId,
diff --git a/components/MultiFileDownloader.tsx b/components/MultiFileDownloader.tsx
index 5538984..69a8c56 100644
--- a/components/MultiFileDownloader.tsx
+++ b/components/MultiFileDownloader.tsx
@@ -7,12 +7,12 @@ import { fetcher } from '../utils/fetchWithSWR'
 import { getStoredToken } from '../utils/protectedRouteHandler'
 
 /**
- * Generates a loading toast with file download progress support
- * @param router Next router instance, used for reloading the page
- * @param progress Current downloading and compression progress (returned by jszip metadata)
- * @returns Toast component with loading progress
+ * A loading toast component with file download progress support
+ * @param props
+ * @param props.router Next router instance, used for reloading the page
+ * @param props.progress Current downloading and compression progress (returned by jszip metadata)
  */
-export function DownloadingToast(router: NextRouter, progress?: string) {
+export function DownloadingToast({ router, progress }: { router: NextRouter, progress?: string }) {
   const { t } = useTranslation()
 
   return (
@@ -84,7 +84,7 @@ export async function downloadMultipleFiles({
 
   // Create zip file and download it
   const b = await zip.generateAsync({ type: 'blob' }, metadata => {
-    toast.loading(DownloadingToast(router, metadata.percent.toFixed(0)), {
+    toast.loading(<DownloadingToast router={router} progress={metadata.percent.toFixed(0)} />, {
       id: toastId,
     })
   })
@@ -152,7 +152,7 @@ export async function downloadTreelikeMultipleFiles({
 
   // Create zip file and download it
   const b = await zip.generateAsync({ type: 'blob' }, metadata => {
-    toast.loading(DownloadingToast(router, metadata.percent.toFixed(0)), {
+    toast.loading(<DownloadingToast router={router} progress={metadata.percent.toFixed(0)} />, {
       id: toastId,
     })
   })