I'm trying to use react chartist tool-tip and there are no errors but nothing shows up when the chart is hovered. Also it appears to be below my DOM i have also specified it to have position of absolute, and a height and width but it doesn't display anything.

const [options, setOptions] = useState({
    showArea: true,
    showLabels: true,
    fullWidth: true,
    high: 17,
    low: 0,
    chartPadding: {
      top: 20,
      right: 0,
      bottom: 0,
      left: -40,
    },
    axisX: {
      showGrid: true,
      showLabel: true,
      labelInterpolationFnc: function (value, index) {
        return index !== 0 && index !== data.labels.length - 1 ? value : null;
      },
    },
    plugins: [
      ChartistTooltip({
        appendToBody: true,
        pointClass: "ct-line-marker",
      }),
    ],
    axisY: { showLabel: true, showGrid: false },
  });

  const drawPoint = (ctx) => {
    if (ctx.type === "point" && ctx.index === markerIndex) {
      var circle = new chartist.Svg(
        "circle",
        {
          cx: ctx.x,
          cy: ctx.y,
          r: 7,
          "ct:value": ctx.value.y,
          "ct:meta": ctx.meta,
          style: "pointer-events: all !important",
        },
        "ct-line-marker"
      );
      ctx.element.replace(circle);
    }
  };

Chart Component

        <Chartist
          listener={{
            created: createGradient,
            draw: drawPoint,
          }}
          options={options}
          data={data}
          type={type}
        />