How to pass custom Icon to DatePicker in mui 5

I am trying to use my custom Icons from react-feathers and I am using a CustomIcon component that returns the icon I want based on name prop, here is the code for that.

import React from 'react';

import * as Icon from 'react-feather';
import {cinchdark} from 'constants/colors';

import Drag from './drag';
import Note from './note';
import OrderedList from './orderedList';

import PropTypes from 'prop-types';

/**
 * A class that handles custom Icons
 */
class CustomIcon extends React.PureComponent {
  /**
   * It return the Icons that are required
   *  @return {Object} return react elements
   */
  render() {
    const {
      color,
      fillColor,
      size,
      style,
    } = this.props;
    const ComponentName = Icon[this.props.name];
    const sizeVariant = size === 'small' ? 16 : 20;
    const fillVariant = fillColor || 'none';
    const strokeWidth = this.props.name === 'Bold' ? 3 : 1.5;

    switch (this.props.name) {
      case 'Drag':
        return <Drag {...this.props}
          fill={fillVariant}
          size={sizeVariant}
        />;
      case 'Note':
        return <Note {...this.props}
          fill={fillVariant}
          size={sizeVariant}
        />;
      case 'NumberedList':
        return <OrderedList {...this.props}
          fill={fillVariant}
          size={sizeVariant}
        />;
      default:
        return <ComponentName className={style}
          color={color || cinchdark}
          fill={fillVariant}
          size={sizeVariant}
          strokeWidth={strokeWidth}
        />;
    }
  }
}

CustomIcon.propTypes = {
  color: PropTypes.string,
  fillColor: PropTypes.string,
  name: PropTypes.string.isRequired,
  size: PropTypes.string,
  style: PropTypes.string,
};

export default CustomIcon;

and I am importing it as :

    import Icon from 'components/CustomIcon/CustomIcon';

    const calendarIcon = <Icon name={ICON_NAME.CALENDAR}/>;

and passing it to the DatePicker

              <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DatePicker
                components={{
                  OpenPickerIcon: calendarIcon,
                }}
                disablePast
                disableToolbar
                format='MM/dd/yyyy'
                id='applicationDeadline'
                inputVariant='outlined'
                KeyboardButtonProps={{
                  'aria-label': 'change date',
                }}
                onChange={this.handleDateChange}
                renderInput={(props) =>
                  <TextField
                    {...props}
                    className={classes.Field}
                    label='Application Deadline'
                  />}
                value={this.props.applicationDeadline}
                variant='dialog'
              />
            </LocalizationProvider>

but I am getting this error: