If I am just passing params from server to client and using it in a useEffect and then try to set a cookie in server, it causes the page to rerender. Is there any way to fix this issue??

"use client";

import { createSession } from "@/app/components/sessions";
import { useEffect, useState } from "react";

export const Client = ({ params }: { params: string }) => {
    const [state, setState] = useState("");
    const [input, setInput] = useState("");
    useEffect(() => {
        console.log("effect run", params);
        setState(params);
    }, [params]);
    return (
        <>
            <input
                placeholder="Enter params"
                value={input}
                onChange={(e) => {
                    setInput(e.target.value);
                }}
            ></input>
            <button
                onClick={async (e) => {
                    e.preventDefault();
                    const params = new URLSearchParams(window.location.search);
                    params.set("data", input);
                    const url = `${window.location.pathname}?${params.toString()}`;
                    window.history.pushState(null, "", url);
                    await createSession({ token: input });
                }}
            >
                Change params
            </button>
            {state}
        </>
    );
};

"use server";

import { cookies } from "next/headers";

export const createSession = async ({ token }: { token: string }) => {
    const cookieStore = await cookies();
    cookieStore.set("hello", token, {
        httpOnly: true,
        sameSite: "lax",
        path: "/",
    });
};