open timepicker just with click on input(no click on icon)

app/component/TimePickerField.js

@@ -1,18 +1,26 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
 
 function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
+  const input = useRef();
   const [value, setValue] = useState("00:00");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const openTimePicker = () => setIsOpen(true);
+  const closeTimePicker = () => setIsOpen(false);
 
   return (
     <div className="w-full relative field-date-picker">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
           ampm={false}
+          open={isOpen}
+          onClose={closeTimePicker}
           disabled={isVacation}
           format="hh:mm"
+          ref={input}
           className="!w-full"
           shouldDisableTime={(timeValue, clockType) => {
             if (clockType === "hours") {
@@ -28,6 +36,9 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
                 : !(24 > timeValue.$H && timeValue.$H > 11 && !disableMinHour);
             }
           }}
+          renderInput={(params) => {
+            return <TextField {...params} onClick={(e) => setOpen(true)} />;
+          }}
           views={["hours", "minutes"]}
           placeholder="انتخاب کنید..."
           onChange={(e) => {
@@ -69,13 +80,23 @@ function TimePickerField({ dataChange, isVacation, disable, timeStart, data }) {
           }}
         />
         <p
-          className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_16px)] flex items-center right-[4px] py-[8px] px-[8px] 
-                w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
+          className={`absolute cursor-pointer rounded-[8px] dark:bg-[#222433] dark:!text-[#A1A1A1] h-[calc(100%_-_6px)] flex items-center right-[4px] py-[8px] px-[8px] 
+                w-[calc(100%_-_8px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
                 ${disable && "!text-[rgba(126,126,126,0.5)]"}`}
+          onClick={openTimePicker}
         >
           {value}
         </p>
       </LocalizationProvider>
+      {/* <button
+        onClick={() => {
+          console.log(input);
+
+          input.current.open = true;
+        }}
+      >
+        test
+      </button> */}
     </div>
   );
 }