Lose focus on custom input

Question

I want an input with a clear button on the left side, so I've created a custom component which returns:

export const LineInput = React.forwardRef<HTMLInputElement, Props>(({},
ref) => {


return (
  <div className={cx('line-input', { 'line-input--error': error, 'line-input--disabled': disabled, 'line-input--modified': modified })}>
    {withRemove && (
      <div className={cx('line-input__clear')} onClick={onRemove} key={nanoid()}>
        {t('clear')}
      </div>
    )}
    <input
      type={type}
      ref={ref}
      name={name}
      onChange={onChange}
      className={classes}
      value={value || ""}
      disabled={disabled}
      readOnly={readonly}
      onClick={onClick}
      onKeyUp={onKeyPressUp}
      {...props}
    />
  </div>
);

} );

My issue is that after every character input the form looses focus. The problem is related to that clear "button". If I am using onBlur method, the focus is not loosed anymore, but the clear button don't do nothing on the first click on it. Using onKeyUp, I am able to delete the input from the first try, but I am losing the focus.

This is how i am using this component:

 <LineInput
    
      onChange={handleOnChange}
      onKeyPressUp = {handleOnBlur}
      value={localValue}
      align="right"
      disabled={disabled}
      error={!localValue && required && isValidationErrorAcquired}
      modified={modified}
      onRemove={handleOnRemove}
    />