diff --git a/src/StepHandler.tsx b/src/StepHandler.tsx
index eccd003b..53cdb0f0 100644
--- a/src/StepHandler.tsx
+++ b/src/StepHandler.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unknown-property */
-import { raf } from '@rc-component/util';
+import { isReactRenderable, raf } from '@rc-component/util';
 import { clsx } from 'clsx';
 import * as React from 'react';
 
@@ -104,7 +104,11 @@ export default function StepHandler({
       className={mergedClassName}
       style={style}
     >
-      {children || <span unselectable="on" className={`${prefixCls}-action-${action}-inner`} />}
+      {isReactRenderable(children) ? (
+        children
+      ) : (
+        <span unselectable="on" className={`${prefixCls}-action-${action}-inner`} />
+      )}
     </span>
   );
 }
diff --git a/tests/renderability.test.tsx b/tests/renderability.test.tsx
new file mode 100644
index 00000000..fb6cad4c
--- /dev/null
+++ b/tests/renderability.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import InputNumber from '../src';
+
+it('renders zero step handlers and keeps them interactive', () => {
+  const onChange = jest.fn();
+  const { getByRole } = render(
+    <InputNumber defaultValue={2} upHandler={0} downHandler={0} onChange={onChange} />,
+  );
+  const up = getByRole('button', { name: 'Increase Value' });
+  const down = getByRole('button', { name: 'Decrease Value' });
+  expect(up.textContent).toBe('0');
+  expect(down.textContent).toBe('0');
+  fireEvent.mouseDown(up);
+  fireEvent.mouseUp(up);
+  expect(onChange).toHaveBeenLastCalledWith(3);
+  fireEvent.mouseDown(down);
+  fireEvent.mouseUp(down);
+  expect(onChange).toHaveBeenLastCalledWith(2);
+});