How do I list items and open the modal from the edit page?

import { useTable, useModalForm } from "@refinedev/core";
import { Modal } from "@components";

const { tableQueryResult } = useTable<IPost>({  
 sorters: {  
 initial: [  
 {  
 field: "id",  
 order: "desc",  
 },  
 ],  
 },  
});

const {  
 formState: { errors },  
 refineCore: { onFinish, formLoading },  
 modal: { visible, close, show },  
 register,  
 handleSubmit,  
 saveButtonProps,  
} = useModalForm<IPost, HttpError, IPost>({  
 refineCoreProps: { action: "edit" },  
});

return (  
 <div>  
 <table>  
 <thead>  
 <tr>  
 <th>ID</th>  
 <th>Title</th>  
 <th>Status</th>  
 <th>Actions</th>  
 </tr>  
 </thead>  
 <tbody>  
 {tableQueryResult.data?.data.map((post) => (  
 <tr key={post.id}>  
 <td>{post.id}</td>  
 <td>{post.title}</td>  
 <td>{post.status}</td>  
 <td>  
 <button onClick={() => show(post.id)}>Edit</button>  
 </td>  
 </tr>  
 ))}  
 </tbody>  
 </table>  
 </div>  
);

<Modal isOpen={visible} onClose={close}>  
 <form className="form" onSubmit={handleSubmit(onFinish)}>  
 <div className="form-group">  
 <label>Title: </label>  
 <input  
 {...register("title", {  
 required: "This field is required",  
 })}  
 />  
 {errors.title && <span>{errors.title.message}</span>}  
 </div>  
 <div className="form-group">  
 <label>Status: </label>  
 <select {...register("status")}>  
 <option value="published">published</option>  
 <option value="draft">draft</option>  
 <option value="rejected">rejected</option>  
 </select>  
 </div>  
 <button type="submit" {...saveButtonProps}>  
 {formLoading ? "Loading" : "Save"}  
 </button>  
 </form>  
</Modal>

import { useModalForm } from "@refinedev/antd";
import { Modal, Form, Input } from "antd";

const {
  formProps,
  modalProps,
  saveButtonProps,
  cancelButtonProps,
} = useModalForm({
  resource: "posts",
  action: "edit",
  id: "1",
});

return (
  <Modal {...modalProps}>
    <Form {...formProps}>
      <Form.Item name="title" label="Title">
        <Input />
      </Form.Item>
      <Form.Item name="content" label="Content">
        <Input.TextArea />
      </Form.Item>
      <Form.Item>
        <Button {...saveButtonProps}>Save</Button>
        <Button {...cancelButtonProps}>Cancel</Button>
      </Form.Item>
    </Form>
  </Modal>
);

import { useTable, useModalForm } from "@refinedev/antd";
import { Button, Modal, Form, Input } from "antd";

export default function PostList() {
  const { tableProps } = useTable();

  const {
    formProps,
    modalProps,
    saveButtonProps,
    cancelButtonProps,
  } = useModalForm({
    resource: "posts",
    action: "edit",
  });

  return (
    <div>
      <Table {...tableProps} rowKey="id">
        {/* Your table columns here */}
        <Table.Column
          title="Actions"
          dataIndex="actions"
          render={(text, record) => (
            <Button onClick={() => modalProps.setVisible(true)}>
              Edit
            </Button>
          )}
        />
      </Table>
      <Modal {...modalProps}>
        <Form {...formProps}>
          <Form.Item name="title" label="Title">
            <Input />
          </Form.Item>
          {/* Other form items */}
          <Form.Item>
            <Button {...saveButtonProps}>Save</Button>
            <Button {...cancelButtonProps}>Cancel</Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

import { Form, Input, Modal } from "antd";
import { useModalForm } from "@refinedev/antd";
import React from "react";

const EditContact = ({ id }) => {
  const {
    modalProps: editModalProps,
    formProps: editFormProps,
  } = useModalForm({
    action: "edit",
    id: id,
  });

  return (
    <Modal {...editModalProps}>
      <Form {...editFormProps}>
        <Form.Item label="First Name" name={"first_name"}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditContact;