How can I close a drawer by clicking outside in typescript component?

Question

import React, {useState} from 'react';
import { Form, Input, Button, Select, DatePicker} from 'antd';
import moment from "moment";

export type EditUserProps = {
    data: {};
    visible: '';
    setVisible: ()=>void;
    onUpdate: () => void;
};

const { Option } = Select;
interface Item {
  id: string;
  name: string;
  phoneNumber: string;
  email: string;
}

interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
  editing: boolean;
  dataIndex: string;
  title: any;
  inputType: 'number' | 'text' | 'select' | 'date' | 'selectPlan' | 'selectLesson' | 'selectStatus' | 'selectCallStatus' | 'selectDownPayment' | 'selectCourseFrequency' | 'selectSubscriptionAmount' | 'selectSubscriptionMonth' | 'selectTimings' | 'selectSubscriptionAmount' | 'selectSubscriptionType' | 'selectPRM' | 'selectWhatsappSent' | 'selectLSQUsers';
  record: Item;
  index: number;
  children: React.ReactNode;
}

const Classdetailsedit: React.FC<EditUserProps> = (props) => {
  const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        phoneNumber: '',
        email: '',
      })
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  
  const [tempDataView, setTempDataView] = useState({});

  const [startdate, setstartdate] = useState("");

  const [selectUserType, setSelectUserType] = useState('')

  const [visible, setVisible] = useState(false);

  function callback(key: any) {
  console.log(key);
  }

  function handleChange(value: any) {
  console.log(`selected ${value}`);
  }

  return (
    <Form
      name="edittab"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        name="classtype"
        label="Class Type"
        rules={[
          {
            required: true,
            message: 'Please Select Class Type',
          },
        ]}>
      <Select
            >
          <Option value="kids">Kids</Option>
          <Option value="adults">Adults</Option>
          </Select>
      </Form.Item>

      <Form.Item
        name="course"
        label="Course"
        rules={[
          {
            required: true,
            message: 'Please Select Course',
          },
        ]}>
          <Select
            >
          <Option value="diseg">Dise : Group Class</Option>
          <Option value="dise1">Dise 1:1</Option>
          <Option value="ieltsg">IELTS : Group Class</Option>
          <Option value="ielts1">IELTS 1:1</Option>
          </Select>
       </Form.Item>
        
      <Form.Item
        name="startinglesson"
        label="Starting Lesson"
        rules={[
          {
            required: true,
            message: 'Please Select Starting Lesson',
          },
        ]}>
          <Select
            >
          <Option value="lesson1">Lesson 1</Option>
          <Option value="lesson31">Lesson 31</Option>
          <Option value="lesson61">Lesson 61</Option>
          <Option value="lesson121">Lesson 121</Option>
          <Option value="lesson201">Lesson 201</Option>
          <Option value="lesson221">Lesson 221</Option>
          <Option value="lesson240">Lesson 240</Option>
          <Option value="lesson301">Lesson 301</Option>
          </Select>
       </Form.Item>
          
      <Form.Item
        name="coursefrequency"
        label="Course Frequency"
        rules={[
          {
            required: true,
            message: 'Please Select Course Frequency',
          },
        ]}>
          <Select
            >
          <Option value="mwf">MWF</Option>
          <Option value="tts">TTS</Option>
          <Option value="ss">SS</Option>
          <Option value="mtwtf">MTWTF</Option>
          </Select>
       </Form.Item>
        
        <Form.Item
        label="Timings"
        name="timings"
        rules={[
          {
            required: true,
            message: 'Please enter Timings',
          },
        ]}
      >
        <Input />
        </Form.Item>
      
      <Form.Item name="startdate"
        label="Start Date"
        rules={[
          {
            required: true,
            message: 'Please select Date Of Birth',
          },
        ]}
      >
         {
          formData.startdate === null ?
          <DatePicker
          format="YYYY/MM/DD"
          style={{ width: "365px" }}
          onChange={(date, dateString) => {
          setstartdate(dateString);
          }}
          placeholder={"Start Date"}
          />
          :
          <DatePicker
          defaultValue={moment(`${tempDataView.startdate}`, "YYYY/MM/DD")}
          format="YYYY/MM/DD"
          style={{ width: "370px" }}
          onChange={(date, dateString) => {
          setstartdate(dateString);
          }}
          placeholder={"Date Of Birth"}
          /> 
          }
      </Form.Item>

      <Form.Item
        label="Address"
        name="address"
        rules={[
          {
            required: true,
            message: 'Please enter Address',
          },
        ]}
      >
        <Input />
      </Form.Item>
          
      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Classdetailsedit;

in this drawer I tried clicking on the 'X' present in drawer but it's not working I would like a solution for that as well This form component is imported into a Tab Component and that tab component is imported to a button which is on the page so when user clicks on the button a drawer opens up with multiple tabs and a submit and X button on top but the X button doesn't work. I'm a newbie please let me know how I can fix this.

It's built on react, typescript and AntD