Editor JS Tool.jsx

import React, { useState, useEffect } from "react";
import { Checkbox, Input, Row, Col, Slider } from "antd";
import ReactDOM from "react-dom";
import { v4 as uuidv4 } from "uuid";

const Component = ({ checked, text = "", id }) => {
  const [value, setValue] = useState(false);
  const [num, setNum] = useState(0);
  useEffect(() => {
    setValue(checked);
  }, [checked]);
  const [inputValue, setInputValue] = useState("");
  useEffect(() => {
    setInputValue(text);
  }, [text]);

  return (
    <div>
      <div id={id} data-checked={value} data-text={inputValue} data-num={num} />
      <Row>
        <Col span={2}>
          <Checkbox
            checked={value}
            onChange={setValue}
            onClick={(e) => {
              console.log(e);
              e.stopPropogation();
              e.preventDefault();
            }}
          />
        </Col>
        <Col span={22}>
          <Input
            bordered={false}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
        </Col>
      </Row>
    </div>
  );
};

export default class Checklist {
  constructor({ data }) {
    this.data = data;
    this.wrapper = null;
    this.id = uuidv4();
  }
  static get toolbox() {
    return {
      title: "Checklist",
      icon:
        '<svg height="15" viewBox="0 0 512 512" width="15" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm0 0" fill="#2196f3"/><path d="m385.75 201.75-138.667969 138.664062c-4.160156 4.160157-9.621093 6.253907-15.082031 6.253907s-10.921875-2.09375-15.082031-6.253907l-69.332031-69.332031c-8.34375-8.339843-8.34375-21.824219 0-30.164062 8.339843-8.34375 21.820312-8.34375 30.164062 0l54.25 54.25 123.585938-123.582031c8.339843-8.34375 21.820312-8.34375 30.164062 0 8.339844 8.339843 8.339844 21.820312 0 30.164062zm0 0" fill="#fafafa"/></svg>',
    };
  }
  rendered() {
    ReactDOM.render(
      <Component
        checked={this.data.checked}
        text={this.data.text}
        id={this.id}
      />,
      this.wrapper
    );
  }
  updated() {
    ReactDOM.render(
      <Component
        checked={this.data.checked}
        text={this.data.text}
        id={this.id}
      />,
      this.wrapper
    );
  }
  render() {
    this.wrapper = document.createElement("div");
    return this.wrapper;
  }
  save(blockContent) {
    const element = document.getElementById(this.id);
    const checked = element.getAttribute("data-checked");
    const text = element.getAttribute("data-text");
    return { checked: checked === "true", text};
  }
}