Validating date and time in react

Question

I'm trying to validate and render the button based on the date and time in react. This is the code,

  const givenStartDate = new Date(collectionDetails?.details?.startDate);
  const givenEndDate = new Date(collectionDetails?.details?.endDate);
  const currentDate = new Date();

//Check if the collection is started or closed or all NFTs are collected
  const renderButton = () => {
    if (collectionDetails?.details?.totalAvailableUnits == 0) {
      return (
        <div className="flex flex-row items-start gap-1">
          <Image
            className="mt-1"
            src={images.InfoImage}
            alt="info"
            height={"20"}
            width={"20"}
          />
          <p className="w-full lg:max-w-[600px] tracking-[0.12px] sm:leading-[1.563rem] leading-[1.25rem] text-[0.75rem] sm:text-[1rem]">
            All Future Reflections artworks have been collected,{" "}
            <span
              onClick={signUpHandler}
              className="font-medium underline cursor-pointer"
            >
              Sign up
            </span>{" "}
            to be notified of future Shiseido generative art collections, news
            and product launches.
          </p>
        </div>
      );
    } else if (currentDate < givenStartDate) {
      return (
        <div className="flex flex-row items-center gap-1">
          <Image
            className=""
            src={images.InfoImage}
            alt="info"
            height={"20"}
            width={"20"}
          />
          <p className="w-full lg:max-w-[600px] tracking-[0.12px] sm:leading-[1.563rem] leading-[1.25rem] text-[0.75rem] sm:text-[1rem]">
            Early Access: Collect from Dec 6th at 6am ET.
          </p>
        </div>
      );
    } else if (currentDate > givenEndDate) {
      return (
        <div>
          <div className="flex flex-row items-start gap-1">
            <Image
              className="mt-1"
              src={images.InfoImage}
              alt="info"
              height={"20"}
              width={"20"}
            />
            <p className="w-full lg:max-w-[600px] tracking-[0.12px] sm:leading-[1.563rem] leading-[1.25rem] text-[0.75rem] sm:text-[1rem]">
              The collection period for Future Reflections artworks has
              finished.{" "}
              <span
                onClick={signUpHandler}
                className="font-medium underline cursor-pointer"
              >
                Sign up
              </span>{" "}
              to be notified of future Shiseido generative art collections, news
              and product launches.
            </p>
          </div>
        </div>
      );
    } else {
      return (
        <div className="lg:mt-[23px]">
          <Button
            onclickFunction={collectNFTHandler}
            title={"COLLECT"}
            className="md:min-w-[249px] min-w-[184px] lg:h-[55px] px-0 md:py-[16.7px] py-[10px] font-shiseido font-medium border-[1px] text-[12px] md:text-[18px] max-sm:tracking-[0.24px]"
          />
        </div>
      );
    }
  };

It's validating based on the system date and time. Not the actual time and date. If I change the current date and time, the validation gets changed according to the local system's time. I want to validate the actual time zone irrespective of local time changes. How to do it ? Any help on this would be appreciated.