Google Multi Line Chart not showing Line Series

I have a problem in Drawing and filtering the charts on the same div. My code works without an error checked it on the console, but my charts looks like this in the browser

Here is my data

[["SalesDiv","date","volume"],
["National","2024-04-30T18:30:00.000Z",100],
["National","2024-05-30T18:30:00.000Z",403],
["National","2024-06-30T18:30:00.000Z",678],
["National","2024-07-30T18:30:00.000Z",700],

["New City","2024-04-30T18:30:00.000Z",90],
["New City","2024-05-31T18:30:00.000Z",200],
["New City","2024-06-30T18:30:00.000Z",500],
["New City","2024-07-31T18:30:00.000Z",300],

["old City","2024-04-30T18:30:00.000Z",10],
["old City","2024-05-31T18:30:00.000Z",203],
["old City","2024-06-30T18:30:00.000Z",178],
["old City","2024-07-31T18:30:00.000Z",400]]

My Script code is

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> 
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);

//Getting Data from AppScript function
function drawchart(){  
  google.script.run.withSuccessHandler(displaychart).funct_data();
}

let filter_selection =[];
//Displaying charts in the Div
function displaychart(c_data1){
    var arrMain = new Array();

        for(i=0; i<c_data1.length;i++){
          var arr = new Array(c_data1[i].date,c_data1[i].volume,c_data1[i].SalesDiv);
          arrMain.push(arr);
        }

        var datatable = new google.visualization.DataTable();
        datatable.addColumn({type: 'date', label: 'x'});
        datatable.addColumn({type: 'number', label: 'y'});
        datatable.addColumn({type:'string',role:'annotation'}); 
        datatable.addRows(arrMain);  
        console.log(datatable);             
      
        var chart = new google.visualization.LineChart(document.getElementById('line_cont'));
        chart.draw(datatable);
      }
// Function to filter the data on Dropdown select & Button click
     function filtering(){                
        google.script.run.withSuccessHandler(filter_data).draw_linechart();             
      }       

      function filter_data(f_sales_div_data){
        let selection = document.getElementById("sales_div").value;
    let filter_sales_div = f_sales_div_data;        

        //Filter for regions
        if(selection==""){
          filter_selection  = filter_sales_div.slice(0);
        }else{          
          filter_selection = filter_sales_div.filter(f_sales_div_data => f_sales_div_data.salesDiv === selection)       ;          
        }     
      }
</script>
<select id="sales_div">
    <option value="National">National</option>
    <option value="New City">New City</option>
    <option value="old city">old city</option>
     </select>
     <button id="srch_btn" onclick="filtering()"> Search </button> 
     <div id="line_cont" class="d_c"></div>

I am trying to acheive to draw a chart on the page load with values “National” in the Data, on the dropdown select and button click filter chart based on the Dropdown selection.