grid layout with cascader

[tommy26tan]

Parent element: <div className={relative gap-4 text-black grid grid-cols-${maxX} grid-rows-${maxY} w-full h-full overflow-y-auto overflow-x-auto}>

Component return:
return (
<Cascader
options={cascaderOptions}
id={id}
expandTrigger="hover"
className={z-10 ${className}}
dropdownClassName={z-50}
dropdownStyle={{ position: 'absolute', zIndex: 50 }}
onChange={(value, selectedOptions) =>
setInputValue(selectedOptions.map((o) => o.label).join(', '))
}
>
);

The tailwind grid layout does not work properly with cascader, Parent option displayed together with sub options, and arrows displayed one line after option.