Как я могу отправить входное значение с почтовым запросом в React?

Я пытаюсь опубликовать запрос о дате начала, дате окончания и количестве гостей в моей программе. Почтовый запрос даты начала и окончания работает. Однако у меня возникают проблемы с отправкой входного значения количества гостей. Мое значение количества гостей возвращается как неопределенное в консоли. Скорее всего, я ошибаюсь с отправкой дескриптора, но я не знаю, как решить эту проблему. Может ли кто-нибудь помочь мне с этой проблемой?

function Search() {
    const history = useHistory();
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());

    const [numberOfGuests, setNumberOfGuests] = useState();
  
    const selectionRange = {
      startDate: startDate,
      endDate: endDate,
      key: "selection"
    };

    const handleSubmit = event => {
      setNumberOfGuests(event.numberOfGuests);
      event.preventDefault()
    }
  
    function handleSelect(ranges) {
      setStartDate(ranges.selection.startDate);
      setEndDate(ranges.selection.endDate);
    }

    const onSearch = useCallback(() => {
      console.info("startDate: ", startDate);
      console.info("endDate: ", endDate);
      console.info("numberOfGuests", numberOfGuests);
    
      axios
        .post(`/availableapartments`, {
          startDate,
          endDate,
          numberOfGuests
        })
        .then((res) => {
          console.info(res);
          console.info(res.data);
          history.push('/availableapartments')
        }); 

    }, [startDate, endDate, numberOfGuests]);
  
    return (
      <div className = "datepickersearch">
        <DateRangePicker ranges = {[selectionRange]} onChange = {handleSelect} />
  
        <h2> Number of guests</h2>
        <input min = {0} defaultValue = {2} max = {7} type = "number" event = {[numberOfGuests]} onChange = {handleSubmit} />
        <Button onClick = {onSearch}>Search Apartments</Button>
      </div>
    );
  }
  
  export default Search;