Hydration Errors with NextJS and Inputs

I've been using NextJS for a few projects lately, and occasionally I start running into these errors:

Each time, I spend an hour or more trying to figure out what I did wrong and why my markup's incorrect, but I always forget that I have LastPass and Proton Pass installed.

Looking at this issue on GitHub, the hydration errors are due to the fact that plugins like this manipulate the DOM and add their buttons to input fields, causing a difference between what the client and server render.

Unfortunately, it looks like the only way to resolve this at the moment is to specify "suppressHydrationWarning={true}" on the elements (which didn't work for me) or prevent the element from rendering on the server by creating a wrapper component that specifies that SSR shouldn't be used.

import { ReactNode } from "react";
import dynamic from "next/dynamic";

interface NoSSRProps {
  children: ReactNode;
}

const NoSSR = ({ children }: NoSSRProps) => <>{children}</>;
export default dynamic(() => Promise.resolve(NoSSR), { ssr: false });

<NoSsr>
  <InputOutlined
    id="email"
    placeholder="Email"
    onChange={(event) => handleTextChange(event, "email")}
    value={registrationData.email ?? ""}
  />
</NoSsr>

As a bonus, I did manage to find a way to hide the icons as well

/* Prevent lastpass and proton mail password managers from displaying icons on input fields */
div[data-lastpass-icon-root] {
  display: none;
}

div > protonpass-control {
  display: none;
}