Formatting date when using xlsx(for converting json array to excel format) from "dd-mm-yyyy hh:mm:ss" to "dd-mm-yyyy"

Question

I am using xlsx npm to convert array of objects to excel format and then I am converting data to blob and downloading it in excel format using file-saver. In my UI I have a button to download the excel

This is a simple react project that I created by npx create-react-app.

I am clicking on Download button to download the excel

Here is my code(for file app.js file).

import { saveAs } from "file-saver";
import * as XLSX from "xlsx";

const EXCEL_TYPE =
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
const EXCEL_EXTENSION = ".xlsx";
function App() {
  const downloadReport = () => {

    const data = [
      { data1: "2023-04-05T14:27:50.232Z" },
      { data1: "2023-04-08T14:27:50.232Z" },
    ];
    const ws = XLSX.utils.json_to_sheet(data);
    // I am looping through the data to change all the A cells i.e. A2 and A3. To set dates for them in the proper format I want
    data.forEach((item, index) => {
      // I am using index + 2 because index starts from 0, A1 is the main header data1(cell A1) which is not a date 
      // I need to change values A2 and A3. Loop runs twice for index 0 and 1 and we get index + 2 = 2 and 3
      //(Thus A2 and A3) for indexes 0 and 1 respectively
      const dateValue = new Date(ws[`A${index + 2}`].v);

      ws[`A${index + 2}`].t = "d";
      ws[`A${index + 2}`].v = dateValue.toLocaleDateString("en-US", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: undefined,
        minute: undefined,
        second: undefined,
        hour12: false,
        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      });
      ws[`A${index + 2}`].z = "dd-mmm-yy;@"; 
      ws[`A${index + 2}`].s = {
        numFmt: "dd-mm-yyyy;@",
        formatCode: "dd-mm-yyyy;@",
      };
    });
    const wb = {
      Sheets: {
        data: ws,
      },
      SheetNames: ["data"],
    };
    const eb = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const blob = new Blob([eb], { type: EXCEL_TYPE });
    saveAs(blob, "file_" + EXCEL_EXTENSION);
  };
  return (
    <div className="App">
      <button onClick={downloadReport}>Download</button>
    </div>
  );
}

export default App;

Here is my package.json

{
  "name": "dummy-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "file-saver": "^2.0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "xlsx": "^0.18.5",
    "xlsx-style": "^0.8.13"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Here is what I am trying to achieve :

When I download the excel I should be able to view date like 02-Aug-22 but when I click on the cell the value of the cell should be 02-08-2022.

With my code I am able to achieve this:

For viewing the excel I am able to get correct format 05-Apr-23 but when I click on the cell for editing it I am getting 05-04-2023 00:00:10. How can I remove 00:00:10 i.e. "hh:mm:ss" part?