A currency input field built with Chakra-UI

CurrencyInput.tsx

function CurrencyInput({
  value,
  onChange,
  max,
}: {
  value: number;
  max: number;
  onChange: (val: number) => void;
}) {
  const [error, setError] = useState('');
  return (
    <>
      <Input
        inputMode="numeric"
        pattern="[0-9,$.]*"
        defaultValue={formatCurrency.format(value / 100)}
        onChange={(e) => {
          const preParse = e.target.value.replace(/[$,]/g, '');
          const num = Number(preParse) * 100;

          if (isNaN(num)) {
            setError('Invalid down payment input.');

            return;
          }

          if (num > max) {
            setError(`Amount must be less than or equal to ${formatCurrency.format(max / 100)}.`);

            return;
          }

          setError('');

          onChange(num);
        }}
      />
      {error && (
        <Text fontSize="sm" color="red.500">
          {error}
        </Text>
      )}
    </>
  );
}