JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
body {
  height: 95%;
}

.chart-height {
  height: 100%;
}
</style>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  
	
  function drawChart() {
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

		google.visualization.events.addListener(chart, 'select', myClickHandler);

		dataTable.addColumn({ type: 'string', id: 'TaskGroup' });
    dataTable.addColumn({ type: 'string', id: 'bar label' });
    dataTable.addColumn({ type: 'string', role: 'tooltip' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

	dataTable.addRows( [
["Admin", "Test ABC ABC", "  • Test ABC ABC", new Date (2021, 10, 6), new Date (2021, 10, 15)]
, ["CAD", "#1 TEST", "  • #1  - TEST", new Date (2021, 10, 7), new Date (2021, 10, 8)]
, ["Field", "Field work - TEST TEST", "  • Field work - TEST", new Date (2021, 10, 6), new Date (2021, 10, 10)]
, ["CAD", "2 TEST TEST", "  • 2   -  TEST TEST", new Date (2021, 10, 11), new Date (2021, 10, 14)]
, ["Admin", "Test ITEM 1", "  • Test ITEM 1", new Date (2021, 10, 6), new Date (2021, 10, 10)]
, ["Field", "Test part 2", "  • Field Test part 2", new Date (2021, 10, 13), new Date (2021, 10, 15)]
, ["Field", "Test Part 3", "  • Field Test Part 3", new Date (2021, 10, 14), new Date (2021, 10, 17)]
]);

    var options = {
		timeline: { 
			rowLabelStyle: {fontName: 'Open Sans', fontSize: 24, color: '#603913' },
			barLabelStyle: { fontName: 'Tahoma', fontSize: 14 },
			colorByRowLabel: true         // not sure I need this, if using the in-line Style as a Column
		}
    };

    chart.draw(dataTable, options);


  function myClickHandler(){
    var selection =...