Жалил

const Input = () => {
  const range = { min: 5, max: 50 }
  const [value, setValue] = useState<number | "">(range.min)

  function onBlurHandle(value: number) {
    if (value >= range.min && value < range.max) return;
    setValue(range.min)
  }

  return (
    <input
      type="number"
      value={value}
      onChange={({ target }) => setValue(target.value === "" ? "" : +target.value)}
      onBlur={({ target }) => onBlurHandle(+target.value)}
      min={range.min}
      max={range.max}
    />
  )
}

import React, { useState } from 'react';

export function App(props) {
  const [value, setValue] = useState( '');
  const [bg, setBg] = useState('red');
  const handleChange = event => {
    setValue(event.target.value);
    if(value.length < 5 || value.length>50){
      setBg('red')
    }
    else{
      setBg('')
    }
   
  };

  return (
    <div className='App'>
      <input
        type='text'
        value={value}
        onChange={handleChange}
        style={{  backgroundColor: bg}}
      />
      <pre>{value}</pre>
    </div>
  );
}

const amounts = [ 5, 10, 15 ];
const [ amount, setAmount ] = useState(null);
const [ isCustomAmount, setIsCustomAmount ] = useState(false);

{amounts.map(n => (
  <label>
    <input
      type="radio"
      disabled={isCustomAmount}
      checked={amount === n && !isCustomAmount}
      onChange={() => setAmount(n)}
    />
    ${n}
  </label>
))}
<label>
  <input
    type="checkbox"
    checked={isCustomAmount}
    onChange={e => (setAmount(null), setIsCustomAmount(e.target.checked))}
  />
  Другая сумма
</label>
{isCustomAmount && <input value={amount} onChange={e => setAmount(+e.target.value)} />}
<input type="hidden" name="amountusd" value={amount} />