I'm rendering <TextField> twice using my defined DatePicker.js component. So, whenever the user clicks on the <CalendarIcon> which is inside the <TextField>, small calendar will open up. I want to style the label in the <TextField> in a specific way. Currently, this is how it looks.

You can see that 'To' label of the second <TextField> is visible. It should come behind the calendar and should not show up.

class DatePickerInput extends React.Component {
  render() {
    const {
      classes,
      label,
      selectedDate
    } = this.props;
    return (<TextField
        fullWidth
        variant="filled"
        label={label}
        onClick={this.props.onClick}
        value={selectedDate.format("MM-DD-YYYY")}
        InputLabelProps={{
          shrink: true
        }}
        InputProps={{
          className: classes.input,
          endAdornment: (<CalendarIcon color="primary" />)
        }}
      />)
  }
}
class DatePicker extends React.Component {

  render() {
    const {
      label,
      value,
      minDate,
      maxDate,
      onChange
    } = this.props;


    return (
      <ReactDatePicker
        selected={value.toDate()}
        minDate={minDate.toDate()}
        maxDate={maxDate.toDate()}
        customInput={<DatePickerInputComp
          selectedDate={value}
          label={label}
        />}
        onChange={onChange} />
    )
  }
}

The problem:
How do I make the 'To' label not show up when the <CalendarIcon> pops up. I want to style the prop 'label' of TextField but I'm not sure of how I can do it.

The Updated Code:

const inputStyles = theme => ({
  icon: {
     zIndex: 1029,
   },
});
class DatePicker extends React.Component {

  render() {
    const {
      label,
      value,
      minDate,
      maxDate,
      onChange,
    } = this.props;
    const { classes } = this.props;


    return (
      <ReactDatePicker
        selected={value.toDate()}
        minDate={minDate.toDate()}
        maxDate={maxDate.toDate()}
        customInput={<DatePickerInputComp
          selectedDate={value}
          label={label}
        />}
        wrapperClassName={classes.icon}
        onChange={onChange} />
    )
  }
}