How can I set the calendar icon beside the react-datepicker?

Question

How can I place the calendar icon after the react-datepicker? Currently, everytime I'll click the datepicker, it'll go after the line of the date-picker and does not stay beside it.

These are the codes: https://codesandbox.io/s/festive-wescoff-71z8u?file=/src/App.js

<label>
        <DatePicker
          wrapperClassName="datePicker"
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          showTimeSelect
          dateFormat="dd/MM/yyyy hh:mm a"
          timeFormat="hh:mm a"
        />
        <TodayIcon />
      </label>

Answer 1

You can provide a custom input for your DatePicker like this and it will behave properly

const CustomInput = React.forwardRef((props, ref) => {
  return (
    <div>          // You can style this further
      <label onClick={props.onClick} ref={ref}>         
        {props.value || props.placeholder}
      </label>
      <TodayIcon onClick={props.onClick} />
    </div>
  );
});


 <DatePicker
          wrapperClassName="datePicker"
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          showTimeSelect
          minDate={new Date()}
          minTime={minTime}
          maxTime={new Date(0, 0, 0, 17)} // 5:00pm
          dateFormat="dd/MM/yyyy hh:mm a"
          timeFormat="hh:mm a"
          timeIntervals={30}
          customInput={<CustomInput/>}
    /> 

Answer 2

You should keep the <label> position relative and update the following style

.MuiSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
    position: absolute;
    right: 0;
    top: -4px;
}