React ag-grid custom tooltip is not working in ipad any browsers

Below is the code used for custom tooltip used in the ag-grid and the customtooltip component code is also attached.

Custom tool tip is working fine in all devices and all browsers(IE11, Chrome, Firefox) but not displaying in ipad device in any of the browsers(Safari, Chrome), Even on long press it is not working

Any solution or suggestion for this will be helpful.

<GridComponent
            columnDefs={columnDefs}
            onGridReady={(params) => onGridReady(params, props, setGridApi)}
            frameworkComponents={frameworkComponents}
            rowData={props.searchResult}
            cellClicked={(event) =>
              cellClicked(
                event,
                props,
                history
              )
            }
            defaultColDef={{
              sortable: true,
              tooltipComponent: "customTooltip",
            }}
            height={200}
          />

Below is the GridComponent.tsx file

<AgGridReact
        columnDefs={props.columnDefs}
        onGridReady={props.onGridReady}
        frameworkComponents={props.frameworkComponents}
        defaultColDef={props.defaultColDef}
        rowData={props.rowData}
        icons={{
          sortAscending: "<i class='ag-icon ag-icon-small-up'/>",
          sortDescending: "<i class='ag-icon ag-icon-small-down'/>",
        }}
        onRowClicked={props.rowClicked}
        onCellClicked={props.cellClicked}
        rowSelection={props.rowSelection}
        onRowSelected={props.rowSelected}
        pagination={props.pagination}
        paginationPageSize={props.paginationPageSize}
        domLayout="autoHeight"
        tooltipShowDelay={0}
        tooltipMouseTrack={false}
      />

Below is the CustomToolTip.tsx file

import React, { forwardRef, useImperativeHandle, useState } from "react";

export default forwardRef((props: any, ref) => {
  const [data] = useState(
    props.api.getDisplayedRowAtIndex(props.rowIndex).data
  );

 

  useImperativeHandle(ref, () => {
    return {
      getReactContainerClasses() {
        return ["custom-tooltip"];
      },
    };
  });

 

  return (
    <div className="custom-tooltip" style={{ backgroundColor: "#000" }}>
      {props.value(data) && <p>{props.value(data)}</p>}
    </div>
  );
});