Hey everyone! 👋

I'm running into a hydration error in my Next.js 15 project and could really use some help.

Here is the relevant code:
The input function is called on a "use client" component

import { Dispatch, SetStateAction } from "react";

export default function Input({
  label,
  type = "text",
  placeholder = "",
  setValue,
}: {
  label: string;
  type?: string;
  placeholder?: string;
  setValue: Dispatch<SetStateAction<string>>;
}) {
  const inputId = label.toLowerCase().replace(" ", "_");

  return (
    <div>
      <label htmlFor={inputId}>{label}</label>
      <input
        type={type}
        placeholder={placeholder}
        onChange={(e) => setValue(e.target.value)}
        autoComplete="on"
        required
      />
    </div>
  );
}

Here’s the error I’m seeing:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

autofill-information={"overall type: UNKNOWN_TYPE\nhtml type: HTML_TYPE_UNSPECIFIED\n..."}
-                               title={"overall type: UNKNOWN_TYPE\nhtml type: HTML_TYPE_UNSPECIFIED\nserver type: NO..."}
-                               autofill-prediction="UNKNOWN_TYPE"