example.js

const initial = {
    firstName: '',
    lastName: '',
    info: ''
};
function exampleReducer(state, action) {
    switch (action.type) {
    case 'update_firstName':
        return {
            ...state,
            firstName: action.value,
        };
    case 'update_lastName':
        return {
            ...state,
            lastName: action.value,
        };
    case 'update_info':
        return {
            ...state,
            info: action.value,
        };
    default:
        return {
            ...state,
        };
    }
}

export function ComponentOne() {
    const [state, reactDispatch] = useReducer(exampleReducer, initial);
    return (
        <>
            <div id="inputcontainer">
                <label>First Name</label>
                <input
                    label="firstName"
                    onChange={(e) => { reactDispatch({ type: 'update_firstName', value: e.target.value }); }}
                />
            </div>
            <div id="inputcontainer">
                <label>First Name</label>
                <input
                    label="firstName"
                    onChange={(e) => { reactDispatch({ type: 'update_lastName', value: e.target.value }); }}
                />
            </div>
            <div id="inputcontainer">
                <label>First Name</label>
                <input
                    label="firstName"
                    onChange={(e) => { reactDispatch({ type: 'update_info', value: e.target.value }); }}
                />
            </div>
        </>
    );
}