Custom definedRanges, multiple range selected

[justinthomas0789]

Subject of the issue

I have a requirement to configure custom definedRanges, ie: today, last 7 days, current month, current year, and two special ranges one is "Before date" (selects a range from an initial date(a constant date) to the selected date) and another is "After date"(selects a selected date to today) I wrote the definedRanges but fell into an issue, which is related to "After date", the condition also satisfies for today and the last 7 days, so in those cases, both today/last 7 days and After date will be highlighted,

[BUG] Bug Reproduce Steps

My definedRange below

const DaterangePicker = props => {
  const initial_ADE_date = new Date('2010-01-01')
  const today = startOfToday() // from date-fns
   const [selectedValue, setSelectedValue] = useState({ startDate: today, endDate: today })

  const definedRanges = createStaticRanges([
      {
        label: t('Today'),
        range: () => ({
            startDate: today,
            endDate: today
          })
      },
      {
        label: t('Last 7 days'),
        range: () => ({
            startDate: subDays(today, 6),
            endDate: endOfToday()
          })
      },

      {
        label: t('Last month'),
        range: () => ({
            startDate: startOfMonth(today),
            endDate: endOfMonth(today)
          })
      },
      {
        label: t('Current year'),
        range: () => ({
            startDate: startOfYear(today),
            endDate: endOfYear(today)
          })
      },
      {
        label: t('Before day'),
        range: () => ({
            startDate: startOfDay(initial_date),
            endDate: selectedValue.endDate ? endOfDayselectedValue.endDate) : endOfToday()
          })
      },
      {
        label: t('After day'),
        range: () => {
          let startDate = selectedValue.startDate
            ? startOfDay(selectedValue.startDate)
            : today;
          if (isAfter(startDate, today)) {
            startDate = today;
          }
          return {
            startDate,
            endDate: today
          }
        }
      }
    ])

  const onDateRangeChange = (ranges, onChange) => {
      if (ranges) {
        const { range1 } = ranges
        const val = {
          startDate: range1.startDate,
          endDate: range1.endDate
        }
        setSelectedValue(val)
      } else {
        setSelectedValue(null)
      }
    }
  return (
    <DateRangePicker
        onChange={selectedRange => onDateRangeChange(selectedRange)}
        showSelectionPreview
        months={1}
        locale={locales[locale]}
        ranges={selectedValue ? [selectedValue] : [{ startDate: new Date(), endDate: new Date() }]}
        staticRanges={definedRanges}
        dateDisplayFormat='dd/MM/yyyy'
        style={{
          color: 'red'
        }}
      />
 )
}

export default DaterangePicker

[BUG] Expected behaviour

By default the selected date will be today, and it will hiighlight the ranges Today and After Date The expected behaviour is it will only highlight Today

Environment

Package Version: 1.4.0 React version: 18.2.0 Node version: 18.17.0 Browser: Chrome