How to use multiple Antd forms inside one modal in React.Js?

Question

I have a modal and inside that I have two Antd forms. When I try to access my second form upon select onChange, it's giving as undefined.

***console.log(secondForm) = undefined***

What is the proper way to fix the issue?

const GenerateReportModal = ({ isVisible, onCLose, title, ...props }) => {
  const [form1, secondForm] = Form.useForm();

  const onChangeTemplate = (selectedTemplateId) => {
    console.log(secondForm);
  };

  return (
    <Modal
      forceRender
      width={"75%"}
      title={false}
      visible
      onCancel={() => {
        onCLose();
      }}
      footer={null}
      getContainer={false}
    >
      <div>
        <AntSelect
          allowClear
          placeholder="Select Template "
          style={{ width: "20%" }}
          onChange={onChangeTemplate}
        />
      </div>

      <Panel header={titleRender("Select fields")} key="1">
        <Form form={form1}>
          <Input />
        </Form>
      </Panel>

      <div>
        <div style={{ padding: "12px" }}>
          <h5>Select report type</h5>
          <Form form={secondForm}>
            <Form.Item name={"reportType"}>
              <Select
                allowClear
                itemList={props.reportTypes}
                onChange={(value) => console.log(value)} 
              />  
            </Form.Item>
          </Form>
        </div>
      </div>
    </Modal>
  );
};