useDraw cannot enable 🐛 [BUG]

[ThinkontrolSY]

I wrote a custom drawer name LineDrawer:

import { CustomControl, useDraw } from "@antv/larkmap";
import { Feature, LineString, Point } from "geojson";
import React, { useEffect } from "react";

export const LineDrawer: React.FC<{
  start: Point;
  initialData?: Feature<LineString>[];
}> = ({ initialData }) => {
  const {
    draw,
    drawData,
    setDrawData,
    getDrawData,
    isEnable,
    enable,
    disable,
  } = useDraw({
    type: "line",
    options: {
      initialData: initialData,
      showMidPoint: false,
      editable: false,
      distanceOptions: {
        showTotalDistance: true,
        showDashDistance: true,
        format: (meters: number, points: Feature<Point>[]) => {
          if (meters >= 1000) {
            return +(meters / 1000).toFixed(2) + "km";
          } else {
            return +meters.toFixed(2) + "m";
          }
        },
      },
      adsorbOptions: {
        data: "allDrawData",
        pointAdsorbPixel: 20,
        lineAdsorbPixel: 20,
      },
    },
  });

  useEffect(() => {
    enable();
  }, [enable]);

  return (
    <CustomControl>
      <div>
        {<button onClick={enable}>Enable</button>}
        {<button onClick={disable}>Disable</button>}
        <button
          onClick={() => {
            setDrawData([]);
          }}
        >
          Clear
        </button>
        <button
          onClick={() => {
            console.log(getDrawData());
          }}
        >
          Get Data
        </button>
      </div>
    </CustomControl>
  );
};

Use it in a LarkMap:

import { GeoLocate } from "@antv/l7";
import React, { CSSProperties } from "react";
import { Point } from "geojson";
import {
  FullscreenControl,
  LarkMap,
  ZoomControl,
  useScene,
} from "@antv/larkmap";
import gcoord from "gcoord";
import { LineDrawer } from "./line_drawer";

export type LineFragment = {
  __typename?: "Line";
  name?: string | null;
  diameter: number;
  layingHeight: number;
  lineString?: any | null;
};

interface LinesInputProps {
  value?: LineFragment[];
  start: Point;
  onChange?: (value: LineFragment[]) => void;
  style?: CSSProperties;
  theme?: string;
  amapApi: string;
  amapkey: string;
  fullScreenControl?: boolean;
  zoomControl?: boolean;
  //  searchControl?: boolean;
}

export const LinesInput: React.FC<LinesInputProps> = ({
  value,
  start,
  onChange,
  theme,
  amapApi,
  amapkey,
  style = {
    height: 300,
    width: "100%",
  },
  fullScreenControl = true,
  zoomControl = true,
  //   searchControl = false,
}) => {
  return (
    <LarkMap
      style={style}
      mapType="Gaode"
      mapOptions={{
        center: start.coordinates as [number, number],
        style: theme,
        zoom: 12,
        token: amapkey,
        // center: center && (center as [number, number]),
      }}
      onSceneLoaded={(newScene) => {
        const geoLocate = new GeoLocate({
          transform: (position) => {
            // 将获取到基于 WGS84 地理坐标系 的坐标转成 GCJ02 坐标系
            return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02);
          },
        });
        newScene.addControl(geoLocate);
      }}
      logoVisible={false}
    >
      {fullScreenControl && <FullscreenControl />}
      {zoomControl && <ZoomControl />}
      <LineDrawer start={start} />
    </LarkMap>
  );
};

But in LineDrawer, enable is not working, and I got such error:

here line_drawer.tsx:43 refers to:

  useEffect(() => {
    enable();
  }, [enable]);