I would like to ask for help regarding the use of this combobox, groups of more than 1 level cannot be searched, can you help me?

[ajiistwn]

const [jobProjectOptionOpen, setJobProjectOptionOpen] = useState(false); 
const [searchJobProject, setSearchJobProject] = useState<string>('');
const [jobProjects, setJobProjects] = useState<Record<string, Record<string, { id: number; name: string; image: string }[]>>>({});

const filteredJobProjects = Object.entries(jobProjects).reduce(
        (acc, [projectName, teams]) => {
            const filteredTeams = Object.entries(teams).reduce(
                (teamAcc, [teamName, jobs]) => {
                    const filteredJobs = jobs.filter((job) => job.name.toLowerCase().includes(searchJobProject.toLowerCase()));
                    if (filteredJobs.length > 0) {
                        teamAcc[teamName] = filteredJobs;
                    }
                    return teamAcc;
                },
                {} as Record<string, { id: number; name: string; image: string }[]>,
            );

            if (Object.keys(filteredTeams).length > 0) {
                acc[projectName] = filteredTeams;
            }
            return acc;
        },
        {} as Record<string, Record<string, { id: number; name: string; image: string }[]>>,
    );
    
    <Popover open={jobProjectOptionOpen} onOpenChange={setJobProjectOptionOpen}>
                                <PopoverTrigger asChild>
                                    <Button variant="outline" role="combobox" className="w-full justify-between dark:bg-zinc-800 dark:text-white">
                                        {newCrew.job_project_id && newCrew.job_project_id.length > 0 ? (
                                            <div className="flex flex-wrap gap-1">
                                                {(() => {
                                                    const selectedJobs: { id: number; name: string; image: string }[] = [];
                                                    if (typeof jobProjects === 'object' && jobProjects !== null) {
                                                        for (const projectName in jobProjects) {
                                                            const teams = jobProjects[projectName];
                                                            for (const teamName in teams) {
                                                                const jobs = teams[teamName];
                                                                for (const job of jobs) {
                                                                    if (newCrew.job_project_id!.includes(job.id)) {
                                                                        selectedJobs.push(job);
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                    return selectedJobs.slice(0, 2).map((job) => (
                                                        <Badge
                                                            key={job.id}
                                                            variant="secondary"
                                                            className="flex items-center gap-1 px-2 py-0.5 text-xs"
                                                        >
                                                            <Avatar className="h-4 w-4">
                                                                <AvatarImage src={job.image} />
                                                                <AvatarFallback>{job.name.charAt(0)}</AvatarFallback>
                                                            </Avatar>
                                                            <span>{job.name}</span>
                                                        </Badge>
                                                    ));
                                                })()}
                                                {newCrew.job_project_id.length > 2 && (
                                                    <Badge variant="outline" className="px-2 py-0.5 text-xs">
                                                        +{newCrew.job_project_id.length - 2}
                                                    </Badge>
                                                )}
                                            </div>
                                        ) : (
                                            'Select job projects...'
                                        )}
                                        <ChevronsUpDown className="ml-2 h-4 w-4 opacity-50" />
                                    </Button>
                                </PopoverTrigger>
                                <PopoverContent className="z-[99] p-0 dark:bg-zinc-800 dark:text-white">
                                    <Command>
                                        <CommandInput
                                            placeholder="Search job projects..."
                                            value={searchJobProject}
                                            onValueChange={(value) => setSearchJobProject(value)}
                                            className="dark:bg-zinc-800 dark:text-white"
                                        />
                                        <CommandList>
                                            <CommandEmpty>No job project found.</CommandEmpty>
                                            {typeof filteredJobProjects === 'object' && filteredJobProjects !== null ? (
                                                Object.entries(filteredJobProjects).map(([projectName, teams]) => (
                                                    <CommandGroup key={projectName} heading={projectName}>
                                                        {Object.entries(teams).map(([teamName, jobs]) => (
                                                            <CommandGroup key={`${projectName}-${teamName}`} heading={`• ${teamName}`}>
                                                                {jobs.map((job: { id: number; name: string; image: string }) => (
                                                                    <CommandItem
                                                                        key={job.id}
                                                                        value={job.name}
                                                                        onSelect={() => {
                                                                            const isSelected = newCrew.job_project_id?.includes(job.id);
                                                                            let newIds: number[];
                                                                            if (isSelected) {
                                                                                newIds = newCrew.job_project_id!.filter((id) => id !== job.id);
                                                                            } else {
                                                                                newIds = [...(newCrew.job_project_id || []), job.id];
                                                                            }
                                                                            setNewCrew({ ...newCrew, job_project_id: newIds });
                                                                        }}
                                                                    >
                                                                        <CheckIcon
                                                                            className={`mr-2 h-4 w-4 ${
                                                                                newCrew.job_project_id?.includes(job.id) ? 'opacity-100' : 'opacity-0'
                                                                            }`}
                                                                        />
                                                                        <Avatar className="mr-2 h-5 w-5 rounded-full">
                                                                            <AvatarImage src={job.image} />
                                                                            <AvatarFallback className="text-xs">{job.name.charAt(0)}</AvatarFallback>
                                                                        </Avatar>
                                                                        {job.name}
                                                                    </CommandItem>
                                                                ))}
                                                            </CommandGroup>
                                                        ))}
                                                    </CommandGroup>
                                                ))
                                            ) : (
                                                <CommandEmpty>No job project found.</CommandEmpty>
                                            )}
                                        </CommandList>
                                    </Command>
                                </PopoverContent>
                            </Popover>