How to stop rendering every keystroke input field onChange in React

Question

Is there a better way to stop rendering every keystroke input field onChange in React... I noted that if I changed the value to onBlur() on input field, however it doesn't dispatch AddReservation function the second part to clear the input field (setReservationCardInput('')). 

Or I cannot stop rendering onChange due to setReservationCardInput update reservationCardInput with useState() function?

My application is below, appreciate your feedback, thank you!

import React, {useState} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import ReservationCard from '../../components/ReservationCard'
import {addReservation} from '../reservation/reservationsSlice'

const ReservationsList = () => { 
  const reservations = useSelector(state => state.reservations.value)
  const [reservationCardInput, setReservationCardInput] = useState('')  
  const dispatch = useDispatch()

  const inputOnChange = (e) => {
    setReservationCardInput(e.target.value)
  }

  console.log('reservations:', reservationCardInput)
  
  const AddReservation =() => {
    if(!reservationCardInput) return
    dispatch(addReservation(reservationCardInput))
    setReservationCardInput('')
}
  return (
          <div className="reservation-cards-container"> 
           {
             reservations.map((name, index) => {
               return (
                 <ReservationCard name={name} key={index}/>
               )
             })
           }
       
           <div className="reservation-input-container">
            <input value={reservationCardInput} onChange={inputOnChange}/>
            <button onClick={AddReservation}>Add Customer</button>
          </div>
      </div>
  )
}

export default ReservationsList