toLowerCase is not a function even after converting to a a string

I am trying to do a sort on this JSON object

Using this sorting code I created:

export const sortData = (data, sortColumn, sortDirection) => {
  if (
    isNotNullOrUndefined(data) &&
    isNotNullOrUndefined(sortColumn) &&
    isNotNullOrUndefined(sortDirection)
  ) {
    data.sort((firstElement, secondElement) => {
      // Move null/empty values to last
      if (!isNotNullOrUndefined(firstElement[sortColumn]) || firstElement[sortColumn] === "") {
        return 1;
      }
      if (!isNotNullOrUndefined(secondElement[sortColumn]) || secondElement[sortColumn] === "") {
        return -1;
      }
      // Handle custom date sorting
      if (isCustomDate(firstElement[sortColumn]) && isCustomDate(secondElement[sortColumn])) {
        const milliSecValue1 = getMilliSecFromDateString(firstElement[sortColumn]);
        const milliSecValue2 = getMilliSecFromDateString(secondElement[sortColumn]);
        return sortDirection === "ascending"
          ? milliSecValue1 - milliSecValue2
          : milliSecValue2 - milliSecValue1;
      }
      // Handle numeric sorting
      if (isNumeric(firstElement[sortColumn]) && isNumeric(secondElement[sortColumn])) {
        const numValue1 = parseFloat(firstElement[sortColumn]);
        const numValue2 = parseFloat(secondElement[sortColumn]);
        return sortDirection === "ascending"
          ? numValue1 - numValue2
          : numValue2 - numValue1;
      }
      // Handle Text sorting
      if (firstElement[sortColumn].toLowerCase() < secondElement[sortColumn].toLowerCase()) {
        return sortDirection === "ascending" ? -1 : 1;
      }
      if (firstElement[sortColumn].toLowerCase() > secondElement[sortColumn].toLowerCase()) {
        return sortDirection === "ascending" ? 1 : -1;
      }
      return 0;
    });
  }
  return data;
};

[
  {
    "NA": {
      "Date": "2023-06-19",
      "Time": "13:01:00",
      "Timezone": "PST"
    }
  },
  {
    "EU": {
      "Date": "2023-06-19",
      "Time": "13:01:00",
      "Timezone": "GMT"
    }
  },
  {
    "IN": {
      "Date": "2023-06-19",
      "Time": "13:01:00",
      "Timezone": "IST"
    }
  }
]

So I had to create a new array in order to store the data since the format of the region value was a string, so I parsed it as JSON first and then after I put the values into an new array. After that I am doing JSON.Stringify in order to turn it back to a string. The issue is when the sort tries to happen it still considers input as an object and not a string.

Is there a way to convert it to a string so that it is able to sort?

var regionsData = JSON.parse(element[0]["region"]);
var addRegionData = [];
regionsData.forEach((value) => {
  addRegionData.push(
    Object.keys(value).toString() +
      " " +
      value[Object.keys(value)[0]].Date +
      " " +
      value[Object.keys(value)[0]].Time +
      " " +
      value[Object.keys(value)[0]].Timezone +
      " "
  );
  dataObj.regions = [JSON.stringify(addRegionData)];
});

I was able to figure it out, this may not be the most efficient solution but it does the job.

I had to convert everything individually using JSON.stringify and then use JSON.Stringify again to convert the whole array again.

Final solution

      var regionsData = JSON.parse(element[0]["regions"]);
var addRegionData = [];
regionsData.forEach((value) => {
addRegionData.push(
JSON.stringify(Object.keys(value)) +
" " +
JSON.stringify(value[Object.keys(value)[0]].Date) +
" " +
JSON.stringify(value[Object.keys(value)[0]].Time) +
" " +
JSON.stringify(value[Object.keys(value)[0]].Timezone) +
" "
);
});
dataObj.regions = JSON.stringify(addRegionData).replace(
/["'/[\][()\\\/]/g,
""
);