У меня есть выбор из 4 кнопок, 3 кнопки чтобы выбирать определённую сумму, и 1 для Другой суммы, когда нажимаю на Другую сумму, появляется инпут снизу, но не могу сделать так чтобы при клике на кнопку состоящей из фиксированной суммы, пропадал инпут для ввода другой суммы
const Pay = ()=>{
const amounts = [ 5, 10, 15 ];
const [ amount, setAmount ] = useState(null);
const [ isCustomAmount, setIsCustomAmount ] = useState(false);
return(
<>
<div className={styles.wrapper}>
<div className={styles.container}>
<form action="https://app.0xProcessing.com/Payment" method="post" >
<input type="hidden" name="test" value="true" />
<input type="email" name="email" placeholder='Email' required />
<input type="text" name="currency" placeholder='Валюта' required />
<div className={styles.mid}>
<div className={styles.choice}>
{amounts.map((value)=>{
return(
<label key={value}>
<input type="radio" value={value} disabled={isCustomAmount} checked={amount === value && !isCustomAmount}
onChange={() => setAmount(value)}
/>
<span>{value}$</span>
</label>
)
})}
<label > <input className={styles.word_opts} type="checkbox" checked={isCustomAmount} style={{display: 'none'}}
onChange={e => (setAmount(null), setIsCustomAmount(e.target.checked))} />
<span className={styles.span}>Другая сумма</span>
</label>
</div>
{isCustomAmount && <input value={amount} onChange={e => setAmount(+e.target.value)} placeholder='Введите сумму' />}
</div>
<input type="hidden" name="ShopId" value="6QsQHcQ6bX" />
<input type="hidden" name="ClientId" value={payKey.data} />
<input type="hidden" name='SuccessUrl' value={`https://next-js-web-sandy.vercel.app/success/`}/>
<input type="hidden" name='AutoReturn' value="true" />
<button type="submit">Send</button>
</form>
</div>
</div>
<h1 className={styles.heading}><Link href={`/`}><button>Назад</button></Link></h1>
</>
)
}
export default Pay