This is the signin/page.tsx in my next.js project:

import {signIn} from '@/auth';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center space-y-8">
      <p className="text-l font-bold">MyApp</p>
      <form
        className="flex flex-col items-center space-y-4"
        action={async () => {
          'use server';
          console.log('#### Sign In');
        }}
      >
        <input type="email" name="email" id="email" placeholder="Email" className="max-w-md border rounded p-2"/>
        <input type="password" name="password" id="password" placeholder="Password"
               className="max-w-md border rounded p-2"/>
        <button type="submit">Sign In</button>
      </form>
      <p>or</p>
      <form
        action={async () => {
          'use server';
          console.log('### SignIn Google');
          await signIn('google');
        }}
      >
        <button type="submit">Continue with Google</button>
      </form>
      <p>Not a member yet? <a href="/signup" className="text-blue-500 underline">Sign up</a></p>
    </main>
  );
}

When this page loads in my browser, an error happens in react:

Unhandled Runtime Error Error: Hydration failed because the initial UI
does not match what was rendered on the server. See more info here:
https://nextjs.org/docs/messages/react-hydration-error

Did not expect server HTML to contain a in .

The problem can be fixed if I disable the LastPass extension in my Chrome.

How to fix this problem while still keep LastPass usable, i.e. automatic email and password input, on this page?