Render a specific component in ssr true page on client side

import {
  Alignment,
  Fit,
  Layout,
  useRive,
  useStateMachineInput,
} from "@rive-app/react-canvas";
import { useEffect, useRef } from "react";

interface RiveHoverPlayerProps {
  src: string;
  artboard?: string;
  stateMachines?: string;
}

export default function RiveHoverPlayer2({
  src,
  artboard,
  stateMachines,
}: RiveHoverPlayerProps) {
  const { rive, RiveComponent } = useRive({
    src,
    artboard,
    stateMachines,
    autoplay: false,
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
  });

  const containerRef = useRef<HTMLDivElement>(null);

  useStateMachineInput(rive, "State Machine 1", "hover", true);

  useEffect(() => {
    if (!containerRef.current) return;
    const container = containerRef.current;
    container.addEventListener("mouseenter", () => {
      rive?.play();
    });
    container.addEventListener("mouseleave", () => {
      rive?.pause();
    });
    return () => {
      container?.removeEventListener("mouseenter", () => {
        rive?.play();
      });
      container?.removeEventListener("mouseleave", () => {
        rive?.pause();
      });
    };
  }, [rive]);

  return (
    <div
      ref={containerRef}
      className="w-full h-full rounded-lg overflow-hidden"
    >
      <RiveComponent />
    </div>
  );
}

import {
  Alignment,
  Fit,
  Layout,
  useRive,
  useStateMachineInput,
} from "@rive-app/react-canvas";
import { useEffect, useRef } from "react";

interface RiveHoverPlayerProps {
  src: string;
  artboard?: string;
  stateMachines?: string;
}

export default function RiveHoverPlayer2({
  src,
  artboard,
  stateMachines,
}: RiveHoverPlayerProps) {
  const { rive, RiveComponent } = useRive({
    src,
    artboard,
    stateMachines,
    autoplay: false,
    layout: new Layout({
      fit: Fit.Cover,
      alignment: Alignment.Center,
    }),
  });

  const containerRef = useRef<HTMLDivElement>(null);

  useStateMachineInput(rive, "State Machine 1", "hover", true);

  useEffect(() => {
    if (!containerRef.current) return;
    const container = containerRef.current;
    container.addEventListener("mouseenter", () => {
      rive?.play();
    });
    container.addEventListener("mouseleave", () => {
      rive?.pause();
    });
    return () => {
      container?.removeEventListener("mouseenter", () => {
        rive?.play();
      });
      container?.removeEventListener("mouseleave", () => {
        rive?.pause();
      });
    };
  }, [rive]);

  return (
    <div
      ref={containerRef}
      className="w-full h-full rounded-lg overflow-hidden"
    >
      <RiveComponent />
    </div>
  );
}