Je ne peux pas modifier les champs de saisie dans react

event.js

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useParams } from 'react-router-dom';
import { editEvent, eventDetail } from '../actions/event';

const EventDetail = () => {
 const { id } = useParams();
 const [updateEvent, setEvent] = useState();
 const EventRecord = useSelector((state) => state.eventDetail);
 const { loading, event, error } = EventRecord;
 const userRecords = useSelector((state) => state.userList);
 const { users } = userRecords;
 const dispatch = useDispatch();
 useEffect(() => {
    dispatch(eventDetail(id));
    setEvent(event);
 }, [id, dispatch]);
const handleChange = e => {
    console.log({ ...updateEvent, [e.target.name]: e.target.value });
    // setEvent({ ...updateEvent, [e.target.name]: e.target.value });
};
const handleSubmit = async e => {
    e.preventDefault();
    dispatch(editEvent(updateEvent, id))
};

return (
    <div>
        {
            loading ? (
                <div> Loading... </div>
            ) : error ? (
                <div> {error} </div>
            ) : (
                        <form onSubmit={e => handleSubmit(e)} >
                            <div className="form-group">
                                <label htmlFor="name" className='mt-2'>Name</label>
                                <input type="text" className="form-control" id="name" name="name" value={event.name || ''} onChange={e => handleChange(e)} />
                            </div>
                            <div className="form-group">
                                <label htmlFor="description">Description</label>
                                <input type="text" className="form-control" id="description" name="description" value={event.description || ''} onChange={e => handleChange(e)} />
                            </div>
                            <div className="form-group">
                            <label htmlFor='userId'>Assosicated User:</label>
                            <select value={event.userId || ''} onChange={e => handleChange(e)} className="form-control" name='userId' >
                                
                            <option> Please Select </option>
                                {
                                    users.map((item) => {
                                        return (
                                            <option key={item.id} value={item.id} > {item.name} </option>
                                        )
                                    })
                                }
                            </select>
                        </div>
                            <Link to='/'> <button type="submit" className="btn btn-primary">Back</button> </Link>
                            <button type="submit" className="btn btn-primary float-right">Update Event</button>
                        </form>
                    )
        }
    </div>
 )
};

export default EventDetail;

Je ne suis pas en mesure de modifier les champs de saisie même si j'ai ajouté une poignée onChange, mais cela ne fonctionne pas et je ne sais pas quel est exactement le problème. Je pense que cela doit fonctionner correctement, mais je ne sais pas exactement quel est le problème, tout fonctionne correctement. Toute aide sera appréciée