[Docs]: update state after action behavior

[jacksonwen001]

Describe what's incorrect/missing in the documentation

Hi all.
I have the issue about how to setState after the action behavior.
for example, I use the modal to create the project. but how to set modal to closed after the action returns the data?

import { Card, Modal } from "antd";
import { useState } from "react";
import { AiOutlineBulb, AiOutlineFileText } from "react-icons/ai";
import { MdDriveFileRenameOutline } from "react-icons/md";
import { RiAddFill } from "react-icons/ri";
import { Form, useActionData } from "react-router-dom";

const ProjectAdd = () => {
  const [open, setOpen] = useState(false);
  const response = useActionData() as {
    message?: string;
    name?: string;
    version?: string;
  };

  return (
    <div>
      <Card
        style={{ width: 300, height: 290 }}
        onClick={() => setOpen(!open)}
        className="flex items-center justify-center cursor-pointer h-44 w-64 text-4xl"
      >
        <RiAddFill />
      </Card>
      <Modal
        open={open}
        onCancel={() => setOpen(false)}
        className=""
        title="Add Project"
        okButtonProps={{
          className: "btn btn-primary",
          htmlType: "submit",
          form: "create_project_form",
        }}
        cancelButtonProps={{ className: "btn" }}
        destroyOnClose
      >
        <Form
          method="post"
          className="flex flex-col gap-3"
          id="create_project_form"
        >
          <label className="input input-bordered flex items-center gap-2">
            <AiOutlineBulb />
            <input
              type="text"
              className="grow"
              placeholder="name"
              name="name"
            />
          </label>
          {response?.name && (
            <span className="text-error font-bold">{response.name}</span>
          )}
          <label className="input input-bordered flex items-center gap-2">
            <MdDriveFileRenameOutline />
            <input
              className="grow"
              placeholder="description"
              name="description"
            />
          </label>
          <label className="input input-bordered flex items-center gap-2">
            <AiOutlineFileText />
            <input className="grow" placeholder="version" name="version" />
          </label>
          {response?.version && (
            <span className="text-error font-bold">{response.version}</span>
          )}

          <label className="input input-bordered flex items-center gap-2">
            <MdDriveFileRenameOutline />
            <input
              className="grow"
              placeholder="version description"
              name="version_description"
            />
          </label>
        </Form>
      </Modal>
    </div>
  );
};
export default ProjectAdd;

[github-actions]

👋 @jacksonwen001, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request.
For usage questions, please use Stack Overflow or Discord where there are a lot more people ready to help you out, or post a new question in the Discussions tab of this repository.
Please feel free to clarify your issue if you think it was closed prematurely.