Next.js カスタムフックを使用した際のレンダリング法について

実現したいこと

ルートコンポーネントではCSRの使用を避けるべきという内容を見て、CSR要素を外部のコンポーネントに移動させています。
元々layuot.jsでReactHooksを使用していましたが、layuot.jsはSSRにして、使用するHooksはカスタムフックとして外部から読み込む形にしたいです。

発生している問題・分からないこと

現状該当のソースコードの内容で何のエラーも出ていませんが、
layuot.jsから"use client"の記載を外すとエラーになります。
(Error: (0 Components_Hokks_useLayoutState__WEBPACK_IMPORTED_MODULE_4_.default) is not a function)

どのようにすれば、layuot.jsをSSRにできますでしょうか？

該当のソースコード

layout.js
1"use client";
2import "./globals.css";
3import Header from './Components/Header/Header';
4import { Provider } from 'react-redux';
5import store from './Redux/store';
6import { Noto_Serif_JP, Roboto, Yusei_Magic } from "next/font/google";
7import useLayoutState from "./Components/Hokks/useLayoutState";
8
9export const _NotoSerifJP = Noto_Serif_JP({
10  subsets: ["latin"],  
11  weight: ["700"],
12  display: "swap",
13});
14
15export const _Roboto = Roboto({
16  subsets: ["latin"], 
17  weight: ["700"],
18  italics: true,
19  display: "swap",
20});
21
22export const _YuseiMagic = Yusei_Magic({
23  subsets: ["latin"], 
24  weight: ["400"],
25  italics: true,
26  display: "swap",
27});
28
29  const Layout = ({ children }) => {
30    const { currentPage, isMounted } = useLayoutState();
31
32    if (!isMounted) {
33      return null;
34    }
35
36    return (
37      <html lang="ja">
38        <body className='max-w-screen-2xl mx-auto h-full w-full scroll-smooth'>
39          <Provider store={store}>
40            <Header currentPage={currentPage} />
41            {children}
42          </Provider>
43        </body>  
44      </html>
45    )
46  }
47
48export default Layout

useLayoutState.js
1"use client";
2import { useState, useEffect } from 'react';
3import { usePathname } from "next/navigation";
4
5const useLayoutState = () => {
6  const [currentPage, setCurrentPage] = useState("");
7  const [isMounted, setIsMounted] = useState(false);
8  const path = usePathname();
9
10  useEffect(() => {
11    setCurrentPage(path === "/" ? "" : "Chat");
12    setIsMounted(true);
13  }, [path]);
14
15  return { currentPage, isMounted };
16}
17
18export default useLayoutState;