Adding Markers on React Google Charts Timeline

[reigj1]

Following this issue on stackoverflow I found how to do it on normal google charts but I need to do it on the react version
https://stackoverflow.com/questions/63825049/how-to-add-custom-markers-to-google-timeline-chart

How do I do this? This is my current code (I added the chartEvents on the component)

            {
              eventName: "ready",
              callback: ({ chartWrapper, google }) => {
                const dataTable = chartWrapper.getDataTable()
                const container = document.getElementById(chartWrapper.getContainerId())
                function addMarkers(events) {
                  var baseline;
                  var baselineBounds;
                  var chartElements;
                  var labelFound;
                  var labelText;
                  var marker;
                  var markerLabel;
                  var markerSpan;
                  var rowLabel;
                  var svg;
                  var svgNS;
                  var timeline;
                  var timelineUnit;
                  var timelineWidth;
                  var timespan;
                  var xCoord;
                  var yCoord;
              
                  // initialize chart elements
                  baseline = null;
                  svg = null;
                  svgNS = null;
                  timeline = null;
                  chartElements = container.getElementsByTagName('svg');
                  if (chartElements.length > 0) {
                    svg = chartElements[0];
                    svgNS = svg.namespaceURI;
                  }
                  chartElements = container.getElementsByTagName('rect');
                  if (chartElements.length > 0) {
                    timeline = chartElements[0];
                  }
                  chartElements = container.getElementsByTagName('path');
                  if (chartElements.length > 0) {
                    baseline = chartElements[0];
                  }
                  if ((svg === null) || (timeline === null) || (baseline === null)) {
                    return;
                  }
                  timelineWidth = parseFloat(timeline.getAttribute('width'));
                  baselineBounds = baseline.getBBox();
                  timespan = new Date(1633531284*1000).getTime() -  new Date(1633538284*1000).getTime();
                  timelineUnit = (timelineWidth - baselineBounds.x) / timespan;
              
                  // add events
                  events.forEach(function (event) {
                    // find row label
                    rowLabel = dataTable.getValue(event.row, 0);
                    chartElements = container.getElementsByTagName('text');
                    if (chartElements.length > 0) {
                      Array.prototype.forEach.call(chartElements, function(label) {
                        if (label.textContent.indexOf('…') > -1) {
                          labelText = label.textContent.replace('…', '');
                        } else {
                          labelText = label.textContent;
                        }
                        if (rowLabel.indexOf(labelText) > -1) {
                          markerLabel = label.cloneNode(true);
                        }
                      });
                    }
              
                    // calculate placement
                    markerSpan = event.date.getTime() - new Date(1633531284*1000).getTime();
              
                    // add label
                    markerLabel.setAttribute('text-anchor', 'start');
                    markerLabel.setAttribute('fill', event.color);
                    markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) + 6));
                    markerLabel.textContent = event.name;
                    svg.appendChild(markerLabel);
              
                    // add marker
                    xCoord = (baselineBounds.x + (timelineUnit * markerSpan) - 4);
                    yCoord = parseFloat(markerLabel.getAttribute('y'));
                    switch (event.type) {
                      case 'triangle':
                        marker = document.createElementNS(svgNS, 'polygon');
                        marker.setAttribute('fill', 'transparent');
                        marker.setAttribute('stroke', event.color);
                        marker.setAttribute('stroke-width', '3');
                        marker.setAttribute('points', xCoord + ',' + (yCoord - 10) + ' ' + (xCoord - 5) + ',' + yCoord + ' ' + (xCoord + 5) + ',' + yCoord);
                        svg.appendChild(marker);
                        break;
              
                      case 'circle':
                        marker = document.createElementNS(svgNS, 'circle');
                        marker.setAttribute('cx', xCoord);
                        marker.setAttribute('cy', yCoord - 5);
                        marker.setAttribute('r', '6');
                        marker.setAttribute('stroke', event.color);
                        marker.setAttribute('stroke-width', '3');
                        marker.setAttribute('fill', 'transparent');
                        svg.appendChild(marker);
                        break;
                    }
                  });
                }
              
                addMarkers([
                  {row: 0, date: new Date(1633538244*1000), name: 'Event 1', type: 'triangle', color: 'red'},
                  {row: 1, date: new Date(1633538245*1000), name: 'Event 2', type: 'circle', color: 'purple'},
                  {row: 2, date: new Date(1633538246*1000), name: 'Event 3', type: 'triangle', color: 'magenta'}
                ]);
              }

              
            }
          ]}