Show number of days when selecting date range

[x-Foz3R-x]

Subject of the issue

There seems to be no way of showing number of days when selecting date range.

Is there a reliable workaround to have this?

I tried to create ::after on .rdrDayEndPreview and in content set number of days but it just was 1 update late

.rdrDayEndPreview::after {
  content: var(--day-number);
  background-color: hsl(232 9% 27%);
  color: white;
  position: absolute;
  top: -1.75rem;
  left: 50%;
  width: fit-content;
  transform: translateX(-50%);
  padding-block: 0.125rem;
  padding-inline: 0.25rem;
  border-radius: 0.375rem;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 1px 4px rgba(0, 0, 0, 0.03),
    0 1px 8px rgba(0, 0, 0, 0.02);
  z-index: 10;
} 

<DateRange
  preview={preview}
  onPreviewChange={(previewDate) => {
    const element = document.querySelector(".rdrDayEndPreview") as HTMLElement | null;

    requestAnimationFrame(() => {
    if (selecting) {
      if (element) {
      element.style.setProperty("--day-number", `"${calculateDays(preview.startDate, previewDate)} days"`);
    }
    setPreview({ startDate: preview.startDate, endDate: previewDate });
    } else {
      if (element) element.style.setProperty("--day-number", '"1 day"');
      setPreview({ startDate: previewDate, endDate: previewDate });
    }
    });
  }}
/>