Converting column data into a string in <CSVLink/> React JSX

Question

I'm fairly new to JS and JSX and learning as I go.

I made a button to download a CSV file containing the {data} and {columns} from a db2 table. When I output this data on the page itself, the phone numbers look normal: 199028675309.

But when I attempt to download it as a CSV using <CSVLink/>, the phone numbers get converted to scientific notation in the CSV file, like this: 1.99029E+11

I know I need to change the phone numbers to a string, but I tried using DataType='String' in the tag. Then I tried adding DataType:'string' in the columns below, but none of this changed anything.

Is it possible to change the phone number data types before the file is downloaded so the numbers are not in scientific notation? How would this be done?

I put a code snippet below:

export default function Home() { 
  const [data, setData] = useState([]);
  const fetchData = async (e) => {
    e.preventDefault();
    const response = await fetch("/.../somedatabase", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      }});
    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }
    console.log(response);
    const responseJson = await response.json();
    console.log(responseJson);
    setData(responseJson);
  };
    const { body,validationResult } = require('express-validator');
    const columns = [{
        dataField: 'Calling Phone',
        text: 'Calling Phone'
      }, {
        dataField: 'Called Phone',
        text: 'Called Phone'
      }];
      return (
      <div>
        <main>
            <button> 
            { data.length ? 
            <CSVLink data={data} columns={columns} filename={'testfile'} target="_blank">
              Download CSV 
            </CSVLink> 
            : null } 
            </button>
        </main>
      </div> 

Answer 1

I was able to resolve this keeping Ghan's answer in mind. I added after console.log(response) a responseJson.forEach, forcing the changes with a new name element["Calling Phone CSV"].

    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }
    console.log(response);
    const responseJson = await response.json();
    responseJson.forEach(element => {      
      element["Calling Phone CSV"] = `=""${element["Calling Phone"]}""`;
      element["Called Phone CSV"] = `=""${element["Called Phone"]}""`
    });
    console.log(responseJson);
    setData(responseJson);
  };

Then under columns, I basically copied it and pasted a new one under it, then gave it a new name (e.g. columnsCSV)

      const columnsCSV = [{
        key: 'Calling Phone CSV',
        label: 'Calling Phone'
      }, {
        key: 'Called Phone CSV',
        label: 'Called Phone'
      }];

Then in the return, I edited the CSVLink to be:

{ data.length ? 
<CSVLink data={data} columns={columnsCSV} filename={'testfile'} target="_blank">
  Download CSV 
</CSVLink> 
: null } 

And that's basically it.