Форма не отправляется, когда форма используется в качестве заголовка дерева TreeNode (andt design)

Question

В этом коде мы используем кнопку с модальным в TreeNode. В модальной форме есть форма, и Ok Button привязывается к форме с помощью атрибута form ('myForm'). Но форма не представлена ​​кнопкой. Похоже, подчинение не работает вообще. Согласно моим исследованиям, это связано с компонентами Tree и TreeNode.

Пример моего кода:

import React, { useState, useMemo } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { useForm, Controller } from "react-hook-form";
import { Modal, Button, Input, Tree } from "antd";

const { TreeNode } = Tree;

const renderForm = (handleSubmit, onSubmit, control) => (
  <form id="myForm" onSubmit={handleSubmit(onSubmit)}>
    <Controller
      as={<Input placeholder="Type" />}
      control={control}
      name="title"
    />
  </form>
);

const Comp = () => {
  const { handleSubmit, control } = useForm();
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = e => {
    setVisible(false);
  };

  const handleCancel = e => {
    setVisible(false);
  };

  const onSubmit = ({ title }) => {
    console.log(title);
  };

  return (
    <div>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okButtonProps={{
          htmlType: "submit",
          form: "myForm"
        }}
      >
        {useMemo(() => renderForm(handleSubmit, onSubmit, control), [
          control,
          handleSubmit
        ])}
      </Modal>
    </div>
  );
};

const App = () => (
  <Tree>
    <TreeNode key="ert" title={<Comp />} />
  </Tree>
);

ReactDOM.render(<App />, document.getElementById("container"));