How to remove the ";" separation in the csv File exported through React-Data-Table-Extension Component?

I'm using React Data Table and React Data Table Extension Components to display my data. The problem being faced is that the csv file exported through React-Data-Table-Extension Component is hardcoded in it's module to use ";" instead of "," in a csv file export.

Is there any way that I can update my front-end React jsx code to fix the issue without updating much of the code block?

My Code sample is as under:

import { useEffect, useState } from "react";
import AppLayout from "../../components/layouts/AppLayout";
import { useNavigate, useLocation } from "react-router-dom";
import { ROUTES } from "../../utils/Constants";
import { ScrollToTopOnMount } from "../../utils/CommonFunctions";
import AdminTabs from "../../components/AdminTabs";
import DataTable from "react-data-table-component";
import {
  searchFunctionality,
  tableCustomStyles,
} from "../../utils/CommonFunctions";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";

export default function DepartmentMembers() {
  const location = useLocation();
  const [filteredValue, setFilteredValue] = useState("");
  const [finalFilteredValue, setFinalFilteredValue] = useState("");
  const [filteredData, setFilteredData] = useState([]);

  let pastScreenData = location?.state?.user?.users;
  pastScreenData.forEach((department, index) => {
    department.serial = index + 1;
  });

  useEffect(() => {
    const sortedData = pastScreenData.sort((a, b) =>
      a.lastName.localeCompare(b.lastName)
    );
    const updatedData = sortedData.map((item, index) => ({
      ...item,
      serial: index + 1,
    }));

    const filteredData = searchFunctionality(
      updatedData,
      dataTableColumns,
      finalFilteredValue
    );
    setFilteredData(filteredData);
  }, [pastScreenData, finalFilteredValue]);

  const navigate = useNavigate();

  const handleViewDepartments = () => {
    navigate(ROUTES.departments);
  };

  const dataTableColumns = [
    {
      name: "#",
      selector: "serial",
      cell: (row, index) => <div>{index + 1}</div>,
      sortable: false,
      width: "50px",
    },
    {
      name: "Last Name",
      selector: "lastName",
      id: "lastName",
      sortable: true,
      wrap: true,
    },
    {
      name: "First Name",
      selector: "firstName",
      sortable: true,
      wrap: true,
    },
    {
      name: "Status",
      selector: "userStatus",
      wrap: true,
    },
  ];

  const tableData = {
    columns: dataTableColumns,
    data: filteredData,
  };

  return (
    <>
      <AppLayout>
        <ScrollToTopOnMount />
        <AdminTabs />
        <form>
          <div className='tab-content bg-white border border-top-0 p-3'>
            <div>
              <button
                type='button'
                className='btn btn-secondary'
                onClick={handleViewDepartments}
              >
                Cancel
              </button>
            </div>
            <div className='d-flex'>
              <h3 className='h3 mt-4'>
                Member(s) of {location?.state?.user?.name}:
              </h3>
            </div>

            <div>
              {!location?.state?.user?.users ? (
                <div className='d-flex justify-content-center p-3'>
                  Loading...
                </div>
              ) : (
                <div
                  className='d-flex align-intems-center flex-wrap col-md-6 col-lg-12'
                  style={{ width: "100%", justifyContent: "center" }}
                >
                  <div
                    className='input-group ms-auto'
                    style={{ width: "auto", display: "inline-flex" }}
                  >
                    <input
                      type='text'
                      className='form-control'
                      placeholder='Search Members'
                      value={filteredValue}
                      aria-describedby='button-addon2'
                      onChange={(event) => setFilteredValue(event.target.value)}
                    />
                    <button
                      className='btn btn-outline-primary'
                      type='button'
                      id='button-addon2'
                      onClick={() => setFinalFilteredValue(filteredValue)}
                    >
                      Go
                    </button>
                    <button
                      type='button'
                      className='btn btn-outline-primary'
                      aria-label='Clear'
                      onClick={() => {
                        setFilteredValue("");
                        setFinalFilteredValue("");
                      }}
                    >
                      Clear
                    </button>
                  </div>

                  <DataTableExtensions {...tableData} filter={false}>
                    <DataTable
                      columns={dataTableColumns}
                      data={filteredData}
                      keyField={(row, index) => index.troString()}
                      noHeader
                      defaultSortFieldId={"lastName"}
                      defaultSortAsc={true}
                      customStyles={tableCustomStyles}
                      pagination
                      highlightOnHover
                    />
                  </DataTableExtensions>
                </div>
              )}
            </div>
            <div>
              <button
                type='button'
                className='btn btn-secondary'
                onClick={handleViewDepartments}
              >
                Cancel
              </button>
            </div>
          </div>
        </form>
      </AppLayout>
    </>
  );
}

Looking at the code on the react-data-table-component-extensions project, it looks like it is hard-coded to a semi-colon.

https://github.com/barisates/react-data-table-component-extensions/blob/master/src/utilities.js

const concat = {
  csv: row => {
    const items = [];

    row.forEach(item => {
      if (typeof item === 'object' && item !== null) {
        items.push(Object.keys(item).map(key => `${key}: ${item[key]}`).join(';'));
      } else {
        items.push(item);
      }
    });

    return items.join(';');
  },

At a quick glance, I didn't see any way to override that export functionality either.

So, it appears that, at least out-of-the-box, you can't change that. You could either request that option be added, or make the change yourself and submit a PR.

Your other option would be to write your own component.