REACTjs | Getting this on Selection of option TypeError: state.users is undefined

I am trying to post data using react to my database but when I select the option getting from axios I get an error state.users is indefined , I also receive a warning that

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen.

import React, { useState, useEffect, useRef } from "react";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import axios from "axios";
const CreateExercise = () => {
  const [state, setState] = useState({
    username: "",
    description: "",
    duration: 0,
    date: new Date(),
    users: [],
  });

  const onChangeUsername = (e) => {
    setState({
      username: e.target.value,
    });
  };
  const onChangeDescription = (e) => {
    setState({
      description: e.target.value,
    });};
  const onChangeDuration = (e) => {
    setState({
      duration: e.target.value,
    });};
  const onChangeDate = (date) => {
    setState({
      date: date,
    }); };

  console.log(reff.current)
  const onSubmit = (e) => {
    e.preventDefault();

    const exercise = {
      username: state.username,
      description: state.description,
      duration: state.duration,
      date: state.date,  };

    axios.post("http://localhost:8000/exercise/add", exercise).then((doc) => {
      console.log(doc.data); });};

  useEffect(() => {
    axios.get("http://localhost:8000/users").then((doc) => {
      if (doc.data.length > 0) {
        setState({
          users: doc.data.map((user) => user.username),
          username: doc.data[1].username,
        }); } }); },[]);
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6 offset-3">
          <h3 className="my-3 text-center">Create New Exercise Log</h3>
          <form onSubmit={onSubmit}> <div className="form-group">
              <label>Username: </label>
              <select required className="form-control" value={state.username}
                onChange={onChangeUsername} >
                {state.users.map(function (user) {
                  return ( <option key={user} value={user}>
                      {user}
                    </option>  );   })}  </select>
            </div>
            <div className="form-group">
              <label>Description: </label>
              <input
                type="text"  required  className="form-control" value={state.description}
     onChange={onChangeDescription}
                  />
            </div>
            <div className="form-group">
              <label>Duration (in minutes): </label>
              <input
                type="text"
                className="form-control"
                value={state.duration}
                onChange={onChangeDuration} />

            </div> <div className="form-group">
              <div>
                <label className="mr-3">Date: </label>
                <DatePicker selected={state.date} onChange={onChangeDate} />
              </div>
            </div> <hr />
            <div className="form-group text-center">
              <input
                type="submit"
                value="Create Exercise Log"
                className="btn btn-primary" /> </div> </form>  </div>
      </div></div> );};

export default CreateExercise;

Answer

changing state at hooks are different from changing at previous class based component where setState({ myKey: Myvalue }) would do the dirty work for you and only update myKey property. with hooks, that doesn’t happen when your state is an object. that means that all other keys will be lost, hence undefined.

to avoid that you can pass a function to setState, where its param is currentState, and do as:

 setState(prevState => ({
  ...prevState,
  myKey: myValue,
}))