Use Reducer

 import React,{useReducer,useState} from "react";

const initStateValue={
    Name:"Sabir",
    Contact:"033333444",
    Roll:"99494"
};

//==============Reducer===Action==List
function SetStudentReducer(state,action) {
    return {
        Name:action.name,
        Contact:action.contact,
        Roll:action.roll
    }
}




//===============Component=========

export function TestReducerComponent() {

    //=====================
    const [name,setName]=useState('');
    const [contact,setContact]=useState('');
    const [roll,setRoll]=useState('');

    //=========Use Reducer============
    const [state,dispatch]=useReducer(SetStudentReducer,initStateValue);


    function Update() {
        dispatch({
            name:name,
            contact:contact,
            roll
        });
    }

    return <>
        <input onChange={(e)=>setName(e.target.value)} placeholder={"Name"}/><br/>
        <input onChange={(e)=>setContact(e.target.value)} placeholder={"Contact"}/><br/>
        <input onChange={(e)=>setRoll(e.target.value)} placeholder={"Roll"}/><br/>
        <button onClick={Update}>Update</button>
        <br/>
        <hr/>
        <br/>
        <h1>Name {state.Name}</h1>
        <h1>Contact {state.Contact}</h1>
        <h1>Roll {state.Roll}</h1>
    </>
}