How do I scroll an element to a specific height of a page in JavaScript?

I’m making a website with react typescript and tailwind and in it, there is a vertical list of the days of the month. The idea is that when you click on a day, it scrolls to the visible part of the div, that is 24rem under the top.

I have this function to scroll the selected day to the top of the page, but I actually need it to scroll 24rem below the top

useEffect(() => {
  // Scroll to the selected day when the component mounts or when the selected date changes
  if (scrollRef.current) {
    const selectedDayElement = scrollRef.current.querySelector(".selected-day");
    if (selectedDayElement) {
      selectedDayElement.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });

      scrollRef.current.scrollTop;
    }
  }
}, [value]);

I tried ‘block: "center"’ and ‘nearest’ but I need a more specific position. Chat GPT suggested some things using an offset property but none of them seemed to have any effects.