Bug with render picker

[serzmerz]

I try to use react-day-picker with react-final-form-arrays and after remove field picker not render:
<FieldArray name="date"> {({ fields }) => ( <div> {fields.map((name, index) => ( <div key={name}> <Field name={name} render={({ input }) => ( <DateRangePicker {...input} inputProps={input} /> )} /> <span onClick={() => fields.remove(index)}>Remove ​​​​​​​unavailable days</span> </div> ))} <span onClick={() => fields.push(undefined)}>+Add ​​​​​​​unavailable days</span> </div> )} </FieldArray>
Code DateRangePicker component:
`import React, { Component } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
import { parseDate } from 'react-day-picker/moment';
import moment from 'moment';
import sheet from './sheet';
import { compose } from 'redux';
import injectSheet from 'react-jss';
import PropTypes from 'prop-types';
import withLocale from 'pages/common/withLocale';
import { intlShape } from 'react-intl';
import messages, { C } from './messages';

class DateRangePicker extends Component {
formatDate = (date) => (
moment(date).locale(this.props.intl.locale).format('DD.MM.YY')
);

static propTypes = {
classes: PropTypes.object.isRequired,
intl: intlShape.isRequired,
value: PropTypes.oneOfType([PropTypes.shape({
from: PropTypes.string,
to: PropTypes.string,
}), PropTypes.string]),
};

static defaultProps = {
intl: { locale: 'en' },
value: { from: undefined, to: undefined },
};

focusTo = () => {
this.to.getInput().focus();
};

showFromMonth = () => {
const { from, to } = this.props;
if (!from) {
return;
}
if (moment(to).diff(moment(from), 'months') < 2) {
this.to.getDayPicker().showMonth(from);
}
};

handleToFocus = () => {
if (!this.props.value.to) {
this.focusTo();
}
};

handleChange = (date, callback) => {
const { value, onChange } = this.props;
onChange({ ...value, ...date });
callback();
};

render() {
const { value: { from, to }, intl: { formatMessage, locale }, classes } = this.props;
const today = moment().toDate();
const modifiers = {
start: from,
end: to,
disabledDays: { before: today },
};

return (
  <div className={classes.rangePicker}>
    <span className={classes.inputWrapper}>
      <DayPickerInput
        value={from}
        placeholder={formatMessage({ id: `${C}.from`, defaultMessage: 'From' })}
        locale={locale}
        formatDate={() => this.formatDate()}
        parseDate={parseDate}
        dayPickerProps={{
          modifiers,
          selectedDays: [from, { from, to }],
          disabledDays: { before: today, after: to },
          toMonth: to,
          numberOfMonths: 1,
        }}
        onDayChange={(value) => this.handleChange({ from: value }, this.handleToFocus)}
      />
    </span>
    <span className={classes.inputWrapper}>
      <DayPickerInput
        ref={el => (this.to = el)}
        value={to}
        placeholder={formatMessage({ id: `${C}.to`, defaultMessage: 'To' })}
        locale={locale}
        formatDate={this.formatDate}
        parseDate={parseDate}
        dayPickerProps={{
          modifiers,
          selectedDays: [from, { from, to }],
          disabledDays: { before: from },
          month: from,
          fromMonth: from,
          numberOfMonths: 1,
        }}
        onDayChange={(value) => this.handleChange({ to: value }, this.showFromMonth)}
      />
    </span>
  </div>
);

}
}

export default compose(
withLocale(messages, C),
injectSheet(sheet),
)(DateRangePicker);
`

[gpbl]

Please provide a reproducible example on codesandbox and we can reopen this, thanks.