Code reference form input with useReducer

import { useReducer } from "react";export default function App() {  const formReducer = (state, action) => {    switch (action.type) {      case "HandleInputText": {        return {          ...state,          [action.field]: action.payload        };      }      case "ToggleConsent": {        return {          ...state,          hasConsented: !state.hasConsented        };      }      default:        return state;    }  };  const initialState = {    username: "",    email: "",    password: "",    hasConsented: false,    gender: "male"  };  const [formState, dispatch] = useReducer(formReducer, initialState);  console.log(formState);  // where dispatch is a method to trigger state updates/changes, reducer is a function we define which controls how we change the state, and initial state is an object with initial values defined, like the initialFormState example above.  const handleChange = (e) => {    dispatch({      type: "HandleInputText",      field: e.target.name,      payload: e.target.value    });  };  return (    <div className="App">      <h1> Reducer with form </h1>      <label>User Name </label>      <input        type="text"        name="username"        value={formState.username}        onChange={(e) => handleChange(e)}      />{" "}      <br />      <label>Email </label>      <input        type="text"        name="email"        value={formState.email}        onChange={(e) => handleChange(e)}      />      <br />      <label>Password </label>      <input        type="text"        name="password"        value={formState.password}        onChange={(e) => handleChange(e)}      />      <br />      <label>Gender </label>      <div onChange={(e) => handleChange(e)}>        <input          type="radio"          value="Male"          name="gender"          checked={formState.gender === "male"}        />{" "}        Male        <input          type="radio"          value="Female"          name="gender"          checked={formState.gender === "female"}        />{" "}        Female        <input type="radio" value="Other" name="gender" /> Other      </div>      <br />      <label> i hearby Govind declare this that the code runs in react App </label>      <input        type="checkbox"        checked={formState.hasConsented}        onChange={() => dispatch({ type: "ToggleConsent" })}      />      <button onClick={() => console.log("printing", formState)}>        print on console      </button>    </div>  );}