Current time in React without hydration errors

CurrentTime.tsx

import { Suspense } from "react";

import CurrentTimeClient from "./CurrentTimeClient";

export default function CurrentTime() {
  const locale = "en-GB";
  const dateConfig = {
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    timeZone: "Europe/London",
  } as const;

  return (
    <Suspense
      fallback={new Intl.DateTimeFormat(locale, dateConfig).format(new Date())}
    >
      <CurrentTimeClient locale={locale} dateConfig={dateConfig} />
    </Suspense>
  );
}

CurrentTimeClient.tsx

"use client";

import { useEffect, useState, unstable_postpone } from "react";

export default function CurrentTimeClient({ locale, dateConfig }) {
  const [, setCounter] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCounter((prevCounter) => prevCounter + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  if (typeof window === "undefined") {
    unstable_postpone("client only");
  }

  return new Intl.DateTimeFormat(locale, dateConfig).format(new Date());
}