JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart-wrapper">
  <!------<div style="margin:auto;"><input type="date" id="chart_dat"></div>----->
  <div id="chart" style="width:800px; height:600px; margin:auto;"></div>
</div>

JavaScript

google.charts.load('current', {
  'packages': ['bar']
});
google.charts.setOnLoadCallback(setDataForChart);

function setDataForChart() //(dataReturned){
{
  bookingsData = [
    ['18/07/2022', 'CHEM A', 4],
    ['18/07/2022', 'Drilling', 4],
    ['18/07/2022', 'OL AOI', 1],
    ['19/07/2022', 'CHEM A', 2],
    ['19/07/2022', 'OL AOI', 1]
  ]

  //bookingsData = dataReturned.filter(test)
  bookingsData = bookingsData.filter(test)

  function test(row) {
    return row[0] == "18/07/2022"
  }

  bookingsData = bookingsData.map(r => [r[1], r[2]])

  drawChart(bookingsData)
}

function drawChart(dataReturned) {

  dataReturned.unshift(["Department", "No. of Jobs"])

  var data = google.visualization.arrayToDataTable(dataReturned);

  var options = {
    chart: {
      title: 'Test'
    },
    legend: {
      position: 'none'
    },
    vAxis: {
      title: 'No.of jobs',
      gridlines: {
        count: 5 		// does not work?
      }
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}