Hello I am trying to make select value with an option to remove selected value but it doesn't work, select from shadcn/radix-ui. I added everything on "SelectTrigger" and it is indeed visible, but triggers nothing, and also the select component still opens it doesnt even trigger the console.log. Added even z-51 but also didn't help

const Select = Root;

const SelectGroup = Group;

const SelectValue = Value;

const SelectTrigger = forwardRef<
  ElementRef,
  ComponentPropsWithoutRef & {
    value?: string | null;
    onChange?: (value: string | null) => void;
  }
>(({ className, children, value, onChange, ...props }, ref) => {
  const handleClear = useCallback(
    (e: React.MouseEvent) => {
      console.log('triggered');
      e.stopPropagation();
      e.preventDefault();
      onChange?.('');
    },
    [onChange],
  );

  return (
    
      {children}
      

        {value && onChange && (
          
            
          
        )}
        
          
        
      
    
  );
});
SelectTrigger.displayName = Trigger.displayName;

const SelectContent = forwardRef<
  ElementRef,
  ComponentPropsWithoutRef
>(({ className, children, position = 'popper', ...props }, ref) => (
  
    
      
        {children}
      
    
  
));
SelectContent.displayName = Content.displayName;

const SelectLabel = forwardRef<
  ElementRef,
  ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
  
));
SelectLabel.displayName = Label.displayName;