Using object in useState

usestate_object.js

import React, { useState } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [state, setState] = useState({
    counter: 0,
    username: ""
  });

  const handleOnClick = () => {
    setState({
      counter: state.counter + 1
    });
  };
  
  const handleOnChange = event => {
    setState({
      username: event.target.value
    });
  };

  return (
    <div>
      <div>
        <p>Counter value is: {state.counter} </p>
        <button onClick={handleOnClick}>Increment</button>
        <br />
        <br />
        Name{" "}
        <input
          type="text"
          name="username"
          value={state.username}
          placeholder="Enter your name"
          autoComplete="off"
          onChange={handleOnChange}
        />
        <br />
        {state.username}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));