input type=Range – thumb doesnt move after reloading page. wanna stay it in the start point. see pics.

function HeaderGetMonth({ childMonth }: HeadingProps) {
  return (
    <p className="absolute bottom-[15px] justify-start left-0 ">{childMonth}</p>
  );
}

  "Jun 2023",
  "Jul 2023",
  "Aug 2023",
  "Sep 2023",
  "Oct 2023",
  "Nov 2023",
  "Dec 2023",
  "Jan 2024",
  "Feb 2024",
  "Mar 2024",
  "Apr 2024",
  "May 2024",
  "Jun 2024",
  "Jul 2024",
  "Aug 2024",
  "Sep 2024",
  "Oct 2024",
  "Nov 2024",
];

function HeaderRange({ click, value }: HeadingProps) {
  const [startPoint, setStartPoint] = useState(monthNames[0]);
console.log(startPoint);
console.log(value);

  const changedMonths = (e: any) =>
    setStartPoint(click(monthNames[e.target.value]));

  return (
    <div className="flex justify-center flex-col w-[300px]">
      <input
        className=" items-center "
        type="range"
        min="0"
        max="17"
        value={startPoint}
        step="1"
        onChange={changedMonths}
      />
    </div>
  );
}

  return (
    <p className="absolute bottom-[15px] justify-start left-0 ">{childMonth}</p>
  );
}

export default function Header() {
  const [months, setMonths] = useState("");
  console.log(months);

  return (    <div className="flex flex-row bg-[#DDEBF6] w-[100%] justify-between px-[50px]">
      <div className="flex flex-row w-[50%] ">
        <HeaderLogo title="Thread Radar" />
        <HeaderLogoSubtitle childMonth={months} />
      </div>
      <div className="w-[50%] flex ">
        <HeaderRegion />
        <div className="flex justify-center relative">
          <HeaderRange click={setMonths}  value={months}/>
          <HeaderGetMonth childMonth={months} />
        </div>
      </div>
    </div>
  );
}

before reloading page

after reloading page

some thoughts how to solve?

find solution input type=Range – thumb doesnt move after reloading page. wanna stay it in the start point. see pics.