I am able to do this with **useEffect**, but every hot reload breaks the state. Not sure why. A solu

return (
    <Form key="UploadDocumentForm" onSubmitCapture={(handleSubmit(onSubmit))}>
      <Form.Item
        label="Assignee: "
        name="fullName"
        id="fullName"
        rules={[{ required: true, message: 'Please input assignee name!' }]}
      >
        <Input />
      </Form.Item>

     <CreateButton value="Submit" disabled={isUploading} />
    </Form >
  );
};

return (
    <Form key="UploadDocumentForm" onSubmitCapture={(handleSubmit(onSubmit))}>
      <Form.Item
        label="Assignee: "
        name="fullName"
        id="fullName"
        rules={[{ required: true, message: 'Please input assignee name!' }]}
      >
        <Input />
      </Form.Item>

     <CreateButton value="Submit" disabled={isUploading} />
    </Form >
  );
};

import { useCustom, useOne } from "@refinedev/core"
import { Col, Input, Row } from "antd"
import { API_BASE_URL } from "../../providers";

const { Search } = Input;

export const Home = () => {

    const spotlightSearch = (value) => {
        const { data, isLoading } = useCustom({
            url: `${API_BASE_URL}/spotlight`,
            method: 'post',
            config: {
                payload: value
            }
        });
        console.log(data);
    };

    return (
        <div>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24}>
                    <Search name="searchFun" placeholder="Provide a search term..." enterButton="Search" size="large" onSearch={(value, event) => {
                        spotlightSearch(value);
                    }} />
                </Col>
            </Row>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24} style={{ marginTop: '32px' }}>
                    <div id="spotlightResults"></div>
                </Col>
            </Row>
        </div>
    )
}

import { useCustom, useOne } from "@refinedev/core"
import { Col, Input, Row } from "antd"
import { API_BASE_URL } from "../../providers";

const { Search } = Input;

export const Home = () => {

    const spotlightSearch = (value) => {
        const { data, isLoading } = useCustom({
            url: `${API_BASE_URL}/spotlight`,
            method: 'post',
            config: {
                payload: value
            }
        });
        console.log(data);
    };

    return (
        <div>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24}>
                    <Search name="searchFun" placeholder="Provide a search term..." enterButton="Search" size="large" onSearch={(value, event) => {
                        spotlightSearch(value);
                    }} />
                </Col>
            </Row>
            <Row gutter={[32, 32]}>
                <Col xs={24} sm={24} xl={24} style={{ marginTop: '32px' }}>
                    <div id="spotlightResults"></div>
                </Col>
            </Row>
        </div>
    )
}