How to create a custom NavGroup?

I tried to do exactly this

And I got the same error...

Does anyone has a template?

yeah, i noticed, its not a server component because of the 'use client'; still didn't know to solve the problem

you can check there is a getPreference here, and that'is where the error is coming from

import Link from "next/link";
import { NavGroup } from '@payloadcms/ui'
import { ServerProps } from "payload";


const CustomNavGroup = ({ payload }: ServerProps) => {
  const { admin } = payload.config.routes;

  return (
    <NavGroup label={"Custom"}>
      <Link className="nav__link" href={`${admin}/custompage`}>
        <span className="nav__link-label">Custom Page</span>
      </Link>
    </NavGroup>
  )
};

export default CustomNavGroup;