Hey guys, I'm pretty new to Next in general, but this is my current code:

components/time.js

"use client";
import { useEffect, useState } from "react";

export default function Time() {
  const [time, setTime] = useState(
    new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London" }),
  );

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(
        new Date().toLocaleTimeString("en-GB", { timeZone: "Europe/London" }),
      );
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <span className="bg-slate-900 px-1 py-0.5 border border-gray-700 rounded-[6px] font-light text-base text-purple-300">
      {time}
    </span>
  );
}

and here is my main page code:

page.js

import React from "react";
import Time from "./components/time";

export default function Home() {
  return (
    <div
      className={`fixed top-0 left-0 w-full h-full bg-[#181A25] text-white flex flex-col justify-center items-start `}
      style={{ paddingLeft: "20px" }}
    >
      <div className="pl-4">
        {" "}
        <h1>Title</h1>
        <p>Description</p>
      </div>

      <Time />
    </div>
  );
}

I'm wondering why I'm getting a hydration error. Everything still works, but I just get the error popup in the bottom left, saying this:

Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error