how to include props and hooks or include all components of the NavbarRoot file into grape js?

[FajarFE]

import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import React, { useState } from "react";

interface dataLink {
name: string;
url: string;
}
export interface NavbarRootProps {
children?: React.ReactNode;
logo?: string;
sizeLogo?: number;
data: dataLink[];
className?: string;
styleLogo?: string;
}

export const NavbarRoot = ({
children,
data,
logo,
styleLogo,
className,
sizeLogo,
}: NavbarRootProps) => {
const [kontrol, setKontrol] = useState(false);
return (
<div
className={w-full text-neutral-200 py-4 flex justify-center items-center h-auto bg-opacity-40 ${className}}>

{logo && (
<Image
src={${logo}}
alt='logo'
width={sizeLogo}
height={sizeLogo}
className={${styleLogo}}
/>
)}

CrotLink

<Button
onClick={() => {
setKontrol(!kontrol);
}}>
Klik

{kontrol &&

awodkoakdoaaowdkoa

}
{data.map((item, index) => {
return (

{item.name}

);
})}

);
};

const DataLayout = [
	{
		name: "1",
		url: "/admin",
	},
	{
		name: "2",
		url: "/profile",
	},
	{
		name: "3",
		url: "/admin",
	},
	{
		name: "3",
		url: "/admin",
	},
	{
		name: "3",
		url: "/admin",
	},
];