show the full code

also this looks wrong displayValue={(manufacturer: string) => manufacturer}

"use client";
import Image from "next/image";
import { Fragment, useState } from "react";
import { Combobox, Transition } from "@headlessui/react";

import { manufacturers } from "@/constants";
import { SearchManufacturerProps } from "@/types";

const SearchManufacturer = ({
manufacturer,
setManufacturer,
}: SearchManufacturerProps) => {
const [query, setQuery] = useState("");

const filterManufacturers =
query === ""
? manufacturers
: manufacturers.filter((item) =>
item
.toLowerCase()
.replace(/\s+/g, "")
.includes(query.toLowerCase().replace(/\s+/g, ""))
);

return (
<div className="search-manufacturer">
<Combobox value={manufacturer} onChange={setManufacturer}>
<div className="relative w-full">
<Combobox.Button className="absolute top-[14px]">
<Image
src="/car-logo.svg"
width={20}
height={20}
className="ml-4"
alt="car logo"
/>
</Combobox.Button>
<Combobox.Input
className="search-manufacturer__input"
placeholder="Volkswagen"
displayValue={(manufacturer: string) => manufacturer}
onChange={(event) => setQuery(event.target.value)}
/>

<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
afterLeave={() => setQuery("")}
>
<Combobox.Options
className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
static
>
{filterManufacturers.map((item) => (
<Combobox.Option
key={item}
className={({ active }) =>
relative search-manufacturer__option ${ active ? "bg-primary-blue text-white" : "text-gray-900" }
}
value={item}
>
{({ selected, active }) => (
#Unknown Channel
<span
className={block truncate ${ selected ? "font-medium" : "font-normal" }}
>
{item}
</span>

{/* Show an active blue background color if the option is selected */}
{selected ? (
<span
className={absolute inset-y-0 left-0 flex items-center pl-3 ${ active ? "text-white" : "text-pribg-primary-purple" }}
></span>
) : null}
</>
)}
</Combobox.Option>
))}
</Combobox.Options>
</Transition>
</div>
</Combobox>
</div>
);
};

export default SearchManufacturer;

This is the full code.......
displayValue={(manufacturer: string) => manufacturer} this is actually given on headless official site