Extracting initialization of data out the component

Not sure if I am over complicating the code but I was wondering if there is a way to extract initialization of the items array outside of the Header component and still be able to pass sessionData.

import React, { useState } from "react";
import { signIn, signOut, useSession } from "next-auth/react";
import Link from "next/link";
import { Menu } from "antd";
import type { MenuProps } from "antd";
import { UserOutlined, UserAddOutlined } from "@ant-design/icons";

const Header: React.FC = () => {
  const [current, setCurrent] = useState("register");
  const { data: sessionData, status } = useSession();

  const items: MenuProps["items"] = [
    {
      label: (
        <div className="float-right">
          <Link href="/register">Register</Link>
        </div>
      ),
      key: "register",
      icon: <UserAddOutlined />,
    },
    {
      label: (
        <button
          className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
          onClick={sessionData ? () => void signOut() : () => void signIn()}
        >
          {sessionData ? "Sign out" : "Sign in"}
        </button>
      ),
      key: "login",
      icon: <UserOutlined />,
    },
  ];

  const onClick: MenuProps["onClick"] = (e) => {
    setCurrent(e.key);
  };

  return (
    <div className="flex items-center">
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
        className="mr-4 flex-shrink-0"
      />
    </div>
  );
};

export default Header;

By parameters in a function:

function getMenuItems(sessionData: TypeOfSessionDataHere): MenuProps["items"] {
  return [
    // create items here
  ]
}

Although, I question the value of this refactor. Your component is very simple, and the items are the actual content that matters here. Putting this in a different file or function, and requiring you use intermediate types seems cumborsome.

I'd just make that inline.

      <Menu
        items={[
          //... just inline content here
        ]}
      />

Or you could make a component for each item if you feel that's cumbersome:

      <Menu
        items={[
          {
            label: <RegisterLabel sessionData={sessionData} />,
            key: "register",
            icon: <UserAddOutlined />,
          }, {
            label: <LoginLabel sessionData={sessionData} />,
            key: "login",
            icon: <UserOutlined />,
          }
        ]}
      />

Lots of choices here.