reading from csv file returns undefined value

For some reason, when I am reading a CSV file with React, I am getting undefined as the values, and I am not sure why this is happening. Below is the general format of my .csv file.

Date,Site,Depth (m),Temp (degC),SpeCond(uS/cm),Chla (ug/L),Turb (FTU),DO (mg/L)
Mar-18-2019,UA01,-0.518,10.9387,233.3824,4.2043,11.118,10.7842
Mar-18-2019,UA01,-0.585,10.9352,233.4042,4.4753,11.272,10.7935
Mar-18-2019,UA01,-0.651,10.9335,233.3973,4.641,11.26,10.7987
Mar-18-2019,UA01,-0.717,10.9319,233.4335,4.7184,10.985,10.796
Mar-18-2019,UA01,-0.785,10.9292,233.4137,4.8404,10.985,10.7938
Mar-18-2019,UA01,-0.85,10.9268,233.4009,5.0127,11.158,10.7885
Mar-18-2019,UA01,-0.909,10.9257,233.4585,5.1674,11.662,10.78
Mar-18-2019,UA01,-0.969,10.9248,233.4452,5.3253,11.249,10.7753
Mar-18-2019,UA01,-1.04,10.9241,233.3777,5.5321,10.852,10.7706
...

This is my App.js:

import React,{useState} from "react";
import * as $ from 'jquery';
import ReactDOM from 'react-dom'
import Highcharts from 'highcharts';
export default function App() {
  const [selects, setSelects] = useState();
  return (
    <div className="App">
      <h1>{selects}</h1>
      <h3 className = "form-labels"> Visuals: </h3>
      <select value = {selects} onChange = {e=>printSelected(e.target.value) }>
        <option>Temperature</option>
        <option>Special Conductivity</option>
        <option>Chlorophyll</option>
        <option>Turbosity</option>
        <option>Dissolved Oxygen</option>
      </select>
      <select value = {selects} onChange = {e=>printSelected1(e.target.value) }>
        <option>UA01</option>
        <option>UA01_SB19</option>
        <option>UA01_SB25</option>
        <option>UA06</option>
        <option>UA06_SB19</option>
        <option>UA06_SB25</option>
        <option>UA07</option>
        <option>UA07_SB19</option>
        <option>UA07_SB25</option>
        <option>UA08</option>
        <option>UA08_SB19</option>
        <option>UA08_SB25</option>
        <option>LA03</option>
        <option>LA03_SB19</option>
        <option>LA03_SB25</option>
        <option>NR02</option>
        <option>NR02_SB19</option>
        <option>NR02_SB25</option>
        <option>OA04</option>
        <option>OA04_SB19</option>
        <option>OA04_SB25</option>
      </select>
    </div>
  );

}
const x = [];
const y = [];
var tab = [];
var tab1 = [];
var tab2 = [];
var tab3 = [];
var tab4 = [];
var response = "";
var data = "";
var sortedD = [];
var sortedD1 = [];
var sortedD2 = [];
var sortedD3 = [];
var sortedD4 = [];

var fileName = "UA01";
var visuals = "Temp";

function printSelected(e) {
  sortedD.length = 0;
  tab.length = 0;
  sortedD1.length = 0;
  tab1.length = 0;
  sortedD2.length = 0;
  tab2.length = 0;
  sortedD3.length = 0;
  tab3.length = 0;
  sortedD4.length = 0;
  tab4.length = 0;
  visuals = e;
  getChart();
}

function printSelected1(e) {
  sortedD.length = 0;
  tab.length = 0;
  sortedD1.length = 0;
  tab1.length = 0;
  sortedD2.length = 0;
  tab2.length = 0;
  sortedD3.length = 0;
  tab3.length = 0;
  sortedD4.length = 0;
  tab4.length = 0;
  fileName = e;
  getChart();
}

async function getChart() {
  await getData();
  var data1 = [];
  var name1 = "";
  if (visuals.localeCompare("Temp") === 0) {
      data1 = sortedD;
      name1 = "Temperature (deg Celsius) ";
  } else if (visuals.localeCompare("Special Conductivity") === 0) {
      data1 = sortedD1;
      name1 = "Special Conductivity (uS/cm) ";
  } else if (visuals.localeCompare("Chlorophyll") === 0) {
      data1 = sortedD2;
      name1 = "Chlorophyll (ug/L) ";
  } else if (visuals.localeCompare("Turbosity") === 0) {
      data1 = sortedD3;
      name1 = "Turbosity (FTU) ";
  } else {
      data1  = sortedD4;
      name1 = "Dissolved Oxygen (mg/L)";
  }

}
async function getData() {
  response = await fetch(fileName + ".csv");
  data = await response.text();
  const table = data.split('n').slice(1);
table.forEach(row => {
  const col = row.split(',');
  const depth = col[2];
  var ele = [];
  var ele1 = [];
  var ele2 = [];
  var ele3 = [];
  var ele4 = [];
  console.log("Depth: " + depth);
  console.log("Val: " + col[3]);
  ele.push(parseFloat(col[3]));
  ele.push(parseFloat(depth));
  ele1.push(parseFloat(col[4]));
  ele1.push(parseFloat(depth));
  ele2.push(parseFloat(col[5]));
  ele2.push(parseFloat(depth));
  ele3.push(parseFloat(col[6]));
  ele3.push(parseFloat(depth));
  ele4.push(parseFloat(col[7]));
  ele4.push(parseFloat(depth));
  tab.push(ele);
  tab1.push(ele1);
  tab2.push(ele2);
  tab3.push(ele3);
  tab4.push(ele4);
})
sortedD = tab.sort((a,b) => b[0]-a[0]);
sortedD1 = tab1.sort((a,b) => b[0]-a[0]);
sortedD2 = tab2.sort((a,b) => b[0]-a[0]);
sortedD3 = tab3.sort((a,b) => b[0]-a[0]);
sortedD4 = tab4.sort((a,b) => b[0]-a[0]);
}

getChart();

I am trying to build a dropdown menu to display different line graphs depending on what dropdown is selected, but for some reason when I try to print values of my variables I am trying to plot, I get undefined. And the length of the arrays I have made are always 43 for some reason…

Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined

I have a feeling that it might be the await fetch and await response, but I am not 100% sure. Any tips on this would be greatly appreciated!