function renderDates(dates) {
    const from = dates[0]?.format?.(format),
      to = dates[1]?.format?.(format);

    return (
      <div
        className="rmdp-header-values"
        style={{
          flex: "1",
          display: horizontal ? "" : "grid",
          margin: "0",
        }}
      >
        <div style={{ display: "inline-block" }}>
          <i className="rmdp-cancel" onClick={() => deselect(dates[0])}>
            +
          </i>
          <span>
            {localeNames.from} {from ?? localeNames.selectDate}
          </span>
        </div>
        {horizontal && (
          <span style={{ padding: "0px 10px" }}>{localeNames.separator}</span>
        )}
        <div style={{ display: "inline-block" }}>
          <i className="rmdp-cancel" onClick={() => deselect(dates[1])}>
            +
          </i>
          <span>
            {localeNames.to} {to ?? localeNames.selectDate}
          </span>
        </div>
      </div>
    );
  }
rmdp-header-values, rmdp-week-day &
rmdp-button classNames
are taken from the main part to
prevent writing duplicate CSS.