PrimeReact FileUpload change value of "Completed" and "Pending" badge

Question

I'm working on a Next.js Typescript project, which uses the FileUpload by PrimeReact. It works fine, but because the project is for german users, I wanted to change the value of the badge after the file is uploaded to:

"Completed" -> "Erfolgreich"

"Pending" -> "Wird verarbeitet"

The only info I found on the PrimeReact Documentary was to use the pt (pass-trough) props, to atleast get in touch with the badge.

Link to PrimeReact pt

But it didn't worked out for me. I also tried item template, but then I just got many many bugs.

Here is my code:

import "./Upload.css";

import { FC } from "react";
import { FileUpload } from 'primereact/fileupload'; 
import { fetchData } from "./serverside";

interface UploadProps {
    label?: string
}

const Upload:FC<UploadProps> = function Upload({ label = "Suche" }){
    return (
        <div className="file-upload-container">
        <FileUpload
          name="demo"
          url=""
          accept=".csv"
          onUpload={onUpload}
          maxFileSize={1000000}
          chooseLabel={label}
          auto
          emptyTemplate={<p className="m-0">Drag & Drop | Datei hier ablegen</p>}
        />
      </div>
    )
}

const onUpload = async (event: any) => {
    const files = event.files;
    fetchData(files);
};

export default Upload;

Upload.css:

.file-upload-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px; /* Optional: Add padding for some spacing around */
  }
  
  .p-fileupload {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    border: none; /* Remove border if any */
  }
  
  .p-fileupload-content {
    flex: 1;
    max-width: 300px; /* Set a fixed max width for the drag-and-drop area */
    min-width: 150px; /* Set a minimum width to keep it from shrinking too much */
    padding: 10px;
    border: 1px dashed #ccc; /* Add a border to indicate the drop area */
    border-radius: 4px; /* Optional: Rounded corners */
    text-align: center; /* Center the text inside */
  }
  
  .p-fileupload-buttonbar {
    display: flex;
    align-items: center;
    background-color: var(--grey-14);
    border: none;
  }

  /* Hide elements with the attribute data-pc-section="filesize" */
.file-upload-container [data-pc-section="filesize"] {
    display: none !important; /* Ensure the file size is hidden */
}

I still have a css framework around it, so it may look a little bit different, but this is how it should like:

But to get back to the task, I just want to change the text of the "Completed" and "Pending" (<- when the upload is still on going)