let [startDate, setStartDate] = useState(() => {
    switch (selectionAlignment) {
      case 'start':
        return alignStart(focusedDate, visibleDuration, locale, minValue, maxValue);
      case 'end':
        return alignEnd(focusedDate, visibleDuration, locale, minValue, maxValue);
      case 'center':
      default:
        return alignCenter(focusedDate, visibleDuration, locale, minValue, maxValue);
    }
  });

  const calculateStartDate = () => {
    switch (selectionAlignment) {
      case 'start':
        return alignStart(
          focusedDate,
          visibleDuration,
          locale,
          minValue,
          maxValue
        )
      case 'end':
        return alignEnd(
          focusedDate,
          visibleDuration,
          locale,
          minValue,
          maxValue
        )
      case 'center':
      default:
        return alignCenter(
          focusedDate,
          visibleDuration,
          locale,
          minValue,
          maxValue
        )
    }
  }

  const [startDate, setStartDate] = useState(() => calculateStartDate())

  const visibleDurationRef = useRef(visibleDuration)

  useEffect(() => {
    if (visibleDuration.months !== visibleDurationRef.current.months) {
      visibleDurationRef.current = visibleDuration
      setStartDate(calculateStartDate())
    }
  }, [visibleDuration])