Sanity test input

ShapeInput.js

import React, { useEffect, useState } from "react";
import PatchEvent, { set, unset } from "@sanity/form-builder";
import { FormField } from "@sanity/base/components";
import { TextInput } from '@sanity/ui';

const ShapeInput = React.forwardRef((props, ref) => {
  const {
    type,
    value,
    readOnly,
    placeholder,
    markers,
    presence,
    compareValue,
    onFocus,
    onBlur,
    onChange
  } = props;

  const handleChange = React.useCallback((event) => {
    const inputValue = event.currentTarget.value
    onChange(PatchEvent.from(inputValue ? set(inputValue) : unset()))
  }, [onChange]);

  // useEffect(() => {
  //   const accessToken =
  //     "pk.eyJ1Ijoiam1jYnJvb20iLCJhIjoianRuR3B1NCJ9.cePohSx5Od4SJhMVjFuCQA";
  //   const detroitBbox = [-83.287803, 42.255192, -82.910451, 42.45023];
  //   let inputMap = new mapboxgl.Map({
  //     container: "inputMap",
  //     style: "mapbox://styles/jmcbroom/cktr8i2jc1vby19qdjbtlvhwg",
  //     bounds: detroitBbox,
  //     fitBoundsOptions: {
  //       padding: 50,
  //     },
  //     accessToken: accessToken,
  //   });

  //   let Draw = new MapboxDraw({
  //     defaultMode:  "draw_polygon",
  //     displayControlsDefault: false,
  //   });

  //   inputMap.addControl(Draw, "top-left");

  //   inputMap.on("load", () => {
  //     inputMap.on("draw.create", (e) => {
  //       let geometry = Draw.getAll();
  //       // handleChange(geometry);
  //     });

  //     inputMap.on("draw.update", (e) => {
  //       let geometry = Draw.getAll();
  //       // handleChange(geometry);
  //     });
  //   });
  // }, []);

  return (
    <FormField
      description={type.description} // Creates description from schema
      title={type.title} // Creates label from schema title
      __unstable_markers={markers} // Handles all markers including validation
      __unstable_presence={presence} // Handles presence avatars
      compareValue={compareValue}
    >
      <TextInput 
        value={value}
        readOnly={readOnly}
        placeholder={placeholder}
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={handleChange}
      />
      {/* <div id="inputMap" style={{ height: 500 }} /> */}
      {/* <input type="text" ref={ref} value={value} onChange={handleChange}/> */}
    </FormField>
  );
});

export default ShapeInput;