I want to render an active item on the screen as soon as the component is rendered

[joaoluke]

I'm using the carousel to select days of the month. It only renders 5 days per slide, it turns out that if we are on the 27th of the month, it will take a long time for the user to go through the slide until the 27th.

export function ItemsCarousel({ children }: ItemsCarouselProps) {
  return (
    <Carousel
      responsive={responsive}
      autoPlay={false}
      shouldResetAutoplay={false}
      focusOnSelect
      centerMode
      containerClass="carousel-container"
      itemClass="carousel-item"
    >
      {children}
    </Carousel>
  );
}

export function MonthButton({
  month,
  isActive,
  onMonthSelect,
}: MonthButtonProps) {
  return (
    <Button
      onClick={() => onMonthSelect(month.numeric)}
      w="100%"
      bg={isActive ? 'brand-orange.300' : 'transparent'}
      color={isActive ? 'white' : 'brand-dark.500'}
      pointerEvents={isActive ? 'none' : 'all'}
    >
      {month.name}
    </Button>
  );
}

I want to make it so that on the 27th if it is 'active' it appears on the slide on the screen as soon as the component is loaded.