How to handle ref in next pages

Question

I'm new to next so i need to use ref in my page but it becomes client then which is bad practise since pages should be server components. How can i handle it. I'm open for any suggestions

"use client";
import { useRef } from "react";

import { ChatInputBar, ChatTopBar, ChatMessages } from "@/components";
import "@/styles/pages/index.scss";

type ChatPageProps = {
  params: {
    name: string;
  };
};

const ChatPage = ({ params: { name } }: ChatPageProps) => {
  const scroll = useRef<HTMLDivElement | null>(null);

  return (
    <div className="chat-page">
      <ChatTopBar />
      <ChatMessages forwardedRef={scroll} />
      <ChatInputBar scroll={scroll} />
    </div>
  );
};

export default ChatPage;