This is example custom input field antd component. For more detailed about custom input field, you can visit: https://ant.design/components/form#components-form-demo-customized-form-controls

CustomInput.tsx

import { Input } from 'antd';
import React, { useEffect, useState } from 'react';

interface PriceInputProps {
  value?: number;
  onChange?: (value: number) => void;
}

const CustomInput: React.FC<PriceInputProps> = ({ value = 0, onChange }) => {
  const [number, setNumber] = useState(0);

  const triggerChange = (changedValue: number) => {
    onChange?.(changedValue);
  };

  useEffect(() => {
    console.log(value);
  }, [value]);

  const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newNumber = parseInt(e.target.value || '0', 10);
    if (Number.isNaN(number)) {
      return;
    }
    if (typeof number === 'number') {
      setNumber(newNumber);
    }
    triggerChange(newNumber);
  };

  return (
    <span>
      <Input type="text" value={value || number} onChange={onNumberChange} style={{ width: 100 }} />
    </span>
  );
};

export default CustomInput;