I have created a CustomTooltip component, and I am using it in the CustomDateTimeRangePicker over the button.But, this is misaligning the Popover of the datepicker and it is coming in the top-left corner.
Can someone help me with how can we restore the original position of the Date-Time popover.
Screenshot of the date component

import React from 'react';
import { Tooltip, styled, tooltipClasses } from '@mui/material';
import PropTypes from 'prop-types';

const CustomTooltip = ({ title, children, placement, tooltipStyle = {}, tooltipClassName = '', ...rest }) => {
  const StyledTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({
    [`& .${tooltipClasses.tooltip}`]: {
      maxHeight: '370px',
      overflowY: 'auto',
      boxSizing: 'border-box',
      ...tooltipStyle,
    },
  }));
  return (
    <StyledTooltip
      title={title}
      placement={placement ?? 'top'}
      classes={{
        tooltip: tooltipClassName,
      }}
      {...rest}
    >
      {children}
    </StyledTooltip>
  );
};

CustomTooltip.propTypes = {
  title: PropTypes.any,
  children: PropTypes.any,
  placement: PropTypes.string,
  tooltipStyle: PropTypes.object,
  rest: PropTypes.any,
  tooltipClassName: PropTypes.string,
};

export default CustomTooltip;

Below is a part of the CustomDateTimeRangePicker where I am using the CustomToolTip

<CustomTooltip
        title={`${new Date(selectedDateTime?.startTime ?? Date.now()).toLocaleString()} - ${new Date(
          selectedDateTime?.endTime ?? Date.now()
        ).toLocaleString()}`}
      >
        <Button
          variant='outlined'
          aria-describedby={id}
          onClick={handleOpenDatePicker}
          startIcon={<CalendarIcon />}
          endIcon={isPopoverOpen ? <KeyboardArrowUpIcon /> : <KeyboardArrowDown />}
          sx={{
            border: `0.5px solid ${colors.border.secondary}`,
            borderRadius: '4px',
            textTransform: 'none',
            fontSize: '12px',
            color: colors.text.secondary,
            backgroundColor: colors.background.white,
            height: '34px',
            width: width,
            '&:hover': {
              borderColor: colors.border.primary,
            },
          }}
        >
          {displayText}
        </Button>
      </CustomTooltip>```