remove extra bottom sheet in checkout page make all them inside the page iteslef

src/components/ProPhoneInput.tsx

@@ -1,6 +1,5 @@
 import { Form } from "antd";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
-import { TitleProps } from "antd/es/typography/Title";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import { FunctionComponent, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,16 +7,20 @@ import PhoneInput from "react-phone-input-2";
 import { useAppSelector } from "redux/hooks";
 import { ProBlack1 } from "ThemeConstants";
 
-interface ProPhoneInput extends TitleProps {
+interface ProPhoneInput {
   propName?: string;
   label?: string;
   getValueCallback?: (value: string) => void;
+  value?: string;
+  onChange?: (value: string) => void;
 }
 
 const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
   propName,
   label,
   getValueCallback,
+  value,
+  onChange,
 }) => {
   const form = useFormInstance();
   const { t } = useTranslation();
@@ -51,8 +54,9 @@ const ProPhoneInput: FunctionComponent<ProPhoneInput> = ({
         onChange={(value) => {
           form.setFieldValue(propName, value);
           getValueCallback?.(value);
+          onChange?.(value);
         }}
-        phone={form.getFieldValue(propName)}
+        phone={value || form.getFieldValue(propName)}
         themeName={themeName}
         placeholder={t("login.mobileNumber")}
         propName={propName}