problem in dark theme webview with next js 13 app router

Question

I get the value of the theme through the parameter and I want it to be determined based on that webview template. It occurred to me, I went with Next Theme and Tailwind. It occurred to me that in the client component of the theme switcher, a button should be executed automatically and I would pass the amount of the theme that I receive from the link below and it would be determined based on that, but I ran into a problem and it does not work. http://localhost:3005/level?darkTheme=true

ThemeSwitcher component

"use client";
import { useState, useEffect, useRef } from "react";
import { useTheme } from "next-themes";

export function ThemeSwitcher({ darkTheme }) {
  console.log(darkTheme);
  const btnRef = useRef(null);
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();
  const themeChange = () =>
    darkTheme === true ? setTheme("dark") : setTheme("light");

  useEffect(() => {
    setMounted(true);
    btnRef.current.addEventListener("click", themeChange);
    btnRef.current.click();
  }, []);

  if (!mounted) {
    return null;
  }
  return <button ref={btnRef}></button>;
}

get it in page.js

const { darkTheme } = searchParams;

and using it

return (
...
<ThemeSwitcher darkTheme={darkTheme} />
...
)

after that did'nt work and had error finally my ThemeSwitcher is this. but dont work

"use client";
import { useState, useEffect, useRef } from "react";
import { useTheme } from "next-themes";

export function ThemeSwitcher({ darkTheme }) {
  const btnRef = useRef(null);
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  const themeChange = () =>
    darkTheme === true ? setTheme("dark") : setTheme("light");

  useEffect(() => {
    setMounted(true);
    themeChange();
  });

  if (!mounted) {
    return null;
  }
  return (
    <>
      <button ref={btnRef}>change</button>;
    </>
  );
}