我所实现的是当我单击输入字段时显示日历组件，以及当我单击它的外部时隐藏它。然而，问题是当我单击图标（日历组件）本身时，我失去了焦点，如何解决这个问题？我不想在单击图标时失去它的焦点。

const [isFocused, setIsFocused] = useState(false);
<form onSubmit={addTask}>
        <div>
          <input
            id="task"
            placeholder=' Add task to "Inbox" on "Tomorrow"'
            className={styles.input}
            onChange={handleChange}
            value={taskName}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
          ></input>
        {isFocused && <Calendar/>}
        </div>

        and this is the Calendar component :
         const Calendar = () => {
           const [isShown, setIsShown] = useState(false);

           

      const clickIcon = (e) => {
        e.preventDefault();
                  setIsShown((current) => !current);
  };

     return   (
    <div>
      <CalendarMonthIcon
        onClick={clickIcon}
        className={styles.calendar}
      ></CalendarMonthIcon>
      {isShown && <Datepicker />}
    </div>
  );
};

我目前无法阻止日历图标失去焦点时，点击它。