ReactJS onChange only triggers in Firefox

Question

I have a peculiar problem with ReactJS (latest version) where the input onChange event does not trigger at all in Chrome. Sample code are as follows:

function NewTodoComponent() {
    const [description, setDescription] = useState('');

    const submit = async(e) => {
        await createNewTodo(description);
        setDescription('');
    }

    const _changeHandler = (e) => {
        setDescription(e.target.value)
    }

    return (
        <div>
            <div>
                <label for="description">Description</label>
                <input type="text" name="description" value={description} onChange={_changeHandler} />
                <button onClick={submit}>Submit</button>
            </div>
        </div>
    );
}

This exact same code works in Firefox. Not sure why it's behaving like this.

Update 1: so I tested the input form on Safari (OSX - work laptop), Safari (OSX and Chrome - personal laptop and personal iPad Pro). All are exhibiting the same problem. So far only Firefox works.

Update 2: using uncontrolled component ( useRef ) works beautifully. Using this for now until I can figure out why controlled components are not working.

Answer 1

nope, I just try on chrome and it's work