ui headless radio-group as button group using flex box

I'm trying to use ui headless radio-group as button group so I want all my button in a single column and multiple rows but with this code

<div className="h-40 bg-red-300">
   <RadioGroup value={selected} onChange={setSelected}>
      <RadioGroup.Label>Options</RadioGroup.Label>
         <div className="flex gap-3">
           {options.map((option) => (
              <RadioGroup.Option value={option} key={option}>
                 {({ checked }) => (
                 <button type="button" className={checked ? 'bg-blue-200 relative' : 'relative'}>
                  {option}
                 </button>
                )}
              </RadioGroup.Option>
            ))}
      </div>
   </RadioGroup>
</div>

all the buttons disappear.

What's the problem?

Worked it out with

<button type="button" className={`relative z-50 ${checked ? 'bg-blue-200' : ''}`}>
   {option}
</button>