Antd form reset is not working on first click

I am using the antd form. I am using the proper way to reset the fields but it's not working on first, click when I come back and press the reset button again it works.

i have used other approaches but it still not working I want to know what I'm doing wrong.

const [form] = Form.useForm();

const handleCancel = () => {
    form.resetFields();
   
  };

  const onReset = () => {
    form.resetFields();
  };

 

 <Form
      id="screener-form"
        form={form}
        onFinish={handleSubmit}
      >
        <Row gutter={[8, 0]}>
          <Col span={16}>
                <Form.Item
                  label="Title"
                  name="title"
                  className="max-w-300"
                  rules={[
                    {
                      required: true,
                      message: "Please enter Title of Screener!!",
                    },
                  ]}
                >
                  <Input size="small" placeholder="Title" />
                </Form.Item>
          </Col>
        </Row>
      </Form>