Only render component on the client?

import { HelpCircle } from 'lucide-react';

import { authClient } from '@/common/auth/authClient';
import { Button } from '@/common/components/ui/button';

export function HelpButton() {
  if (typeof window === 'undefined') return null;

  const { data: session } = authClient.useSession();

  const helpUrlSearchParams = new URLSearchParams({
    subject: 'Feedback subject',
    message: 'Share feedback or ask a question.',
    ...(session?.user.email && { email: session.user.email }),
    ...(session?.user.name && { name: session.user.name }),
  });

  return (
    <div className="fixed right-6 bottom-6 z-50">
      <Button
        className="rounded-full bg-blue-600 shadow-lg transition-all duration-200 hover:bg-blue-700 hover:shadow-xl"
        size="default"
        asChild
      >
        <a href={`/contact?${helpUrlSearchParams.toString()}`} target="_blank" rel="noopener noreferrer">
          <HelpCircle className="h-4 w-4" />
          <span className="hidden text-xs sm:inline">Need help?</span>
          <span className="text-xs sm:hidden">Help</span>
        </a>
      </Button>
    </div>
  );
}

react-dom_client.js?v=f4cd0ec3:3354 Uncaught Error: 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:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
...