поле input обрабатывает запрос при каждом введении нового символа, из за этого путаються запросы как это исправить?

Ребят помогите пожалуйста, когда я ввожу какой либо символ в поле input срабатывает функция onChange, как сделать так чтоб функия onChange срабатывала только при нажатии Enter?

вот весь код:

import { FunctionComponent, ReactElement, useState, useEffect } from 'react'
import { makeStyles, withStyles } from '@material-ui/core/styles'
import IFilter from '../../../interfaces/filters/filters'
import IFetchedFilter from '../../../interfaces/filters/fetchedFilter'
import FilterValueType from '../../../interfaces/filters/filterValueType'
import Slider from '@material-ui/core/Slider'

const useStyles = makeStyles(() => ({
  label: {
    marginBottom: '2px',
    display: 'block'
  },

  priceInput: {
    display: 'inline-block',
    width: '73px',
    margin: '0px 0px 0px 3px',
    color: '#333',
    fontSize: '12px',
    border: '1px solid #fff',
    outline: 'none',
    padding: '2px 3px',
    borderRadius: '2px',
    boxSizing: 'border-box'
  }
}))

const CustomeSlider = withStyles({
  root: {
    color: '#F49827',
    padding: '0px',
    height: 10,
    width: '93%'
  },
  thumb: {
    height: '1.2em',
    width: '1.5em',
    borderRadius: '3px',
    backgroundColor: '#fff',
    border: '1px solid #fff',
    '&:hover': {
      backgroundColor: '#487cef',
      opacit: 1,
      boxShadow: 'none'
    }
  },
  active: {
    backgroundColor: '#285f8f',
    boxShadow: 'none'
  },
  track: {
    height: 10
  },
  rail: {
    color: '#80b4e6',
    opacity: 1,
    height: 10,
    borderRadius: '4px'
  },
  mark: {
    display: 'none'
  }
})(Slider)

interface IProps {
  filter: IFilter
  filterType: IFetchedFilter
  onChange: (value: number[]) => void
  value: FilterValueType
}

const PriceSlider: FunctionComponent<IProps> = ({
  filter,
  filterType,
  onChange,
  value
}): ReactElement => {
  const classes = useStyles()
  const [state, setState] = useState<FilterValueType>(value)
  useEffect(() => {
    setState(value)
  }, [value])

  const power = 6
  const minValue = Number(filterType.attributeValues[0])
  const maxValue = Number(
    filterType.attributeValues[filterType.attributeValues.length - 1]
  )
  const step = 1 / (maxValue - minValue)

  const transform = (value: number): number => {
    return Math.round(
      ((Math.exp((power * value) / maxValue) - 1) / (Math.exp(power) - 1)) *
        maxValue
    )
  }

  const reverse = (value: number): number => {
    return (
      (1 / power) *
      Math.log(((Math.exp(power) - 1) * value) / maxValue + 1) *
      maxValue
    )
  }




  


  return (
    <>
      <div style={{ display: 'flex', marginBottom: '5px' }}>
        <label className={classes.label} style={{ marginRight: '5px' }}>
          {filter.name}:
        </label>
        <div style={{ display: 'flex' }}>
          <div>{filter.unit && filter.unit}</div>



          
         //ниже как раз те поля input которые нужно исправить




          <input
            className={classes.priceInput}
            value={Object.is(Number(state[0]), -0) ? '' : Number(state[0])}
            onChange={ e => {
              let number = Number(e.target.value)
      
              if (!Number.isNaN(number)) {
                if (e.target.value === '') number = -0
                onChange([number, filter.value[1] as number])
              }
            }}
          />
        </div>
        <div style={{ margin: '0px 7px' }}>to</div>
        <div style={{ display: 'flex' }}>
          <div>{filter.unit && filter.unit}</div>
         
          <input
            className={classes.priceInput}
            
            value={Object.is(Number(state[1]), -0) ? '' : Number(state[1])}
            
            onChange = { e => {
            let number = Number(e.target.value)
           
            if (!Number.isNaN(number)) {
              if (e.target.value === '') number = -0
              onChange([filter.value[0] as number, number])
              
            }
          }}
          />



        </div>
      </div>
      <CustomeSlider
        value={[reverse(state[0] as number), reverse(state[1] as number)]}
        id='price-range-slider-1234'
        onChange={(e, values: number[]) => {
          setState([transform(values[0]), transform(values[1])])
        }}
        min={minValue}
        max={maxValue}
        step={step}
        onChangeCommitted={() => {
          onChange(state as number[])
        }}
      />
    </>
  )
}

export default PriceSlider

Если не знаете как это исправить хотябы намекните в чем моя ошибка