react-hook-form controller with materialUI TextField form results in a TypeError: e.target is undefined when using onChange

Question

I've come across something interesting and would like to ask for some help.

I keep getting an error TypeError: e.target is undefined when trying to do an onChange.

I have a setup similar to this:

import React, { useEffect, useState } from "react";
import { useForm, Controller } from "react-hook-form";
import Grid from "@material-ui/core";

import TextField from "@material-ui/core/TextField";

export default function LogInForm() {
    const [userName, setUserName] = useState("asdf");

    const { register, handleSubmit, control, errors } = useForm();

    const updateUserName = (e) => {
    setUserName(e.target.value);
    };

    const onSubmit = (data) => {
    console.log(data);
    };

    return (
    <form className={classes.form} onSubmit={handleSubmit(onSubmit)}>
        <Grid container spacing={3}>
        <Grid item xs>
            <Controller
            as={<TextField />}
            name="user_name"
            label="Username"
            control={control}
            value={userName}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="user_name"
            autoComplete="Username"
            autoFocus
            // onChange={(e) => setUserName(e.target.value)}
            // onChange={([e]) => setUserName(e.value)}
            onChange={updateUserName}
            />
        </Grid>
        </Grid>
        </form>
    )
}

You'll notice a couple of commented out attempts on the onChange. ALL three of these come up with the same error TypeError: e.target is undefined.

Now I can only assume this is due to the react-hook-form using the Controller to wrap the TextField?

How can I still do an onChange, to change the state in this example? I've spent some hours on this but have come to a wall and any advice would be greatly appreciated.

Thank you.

UPDATE: In response to a test request I added:

const updateUserName = (e) => {
    console.log(e);
    setUserName(e.target.value);
    console.log(e);
};

This resulted in an empty array in the console.

Answer 1

Cloud you check this React-Form-Hook Controller Docs

   onChange={{([ event ]) => event.target.value}}
onChange={{([ { checked } ]) => ({ checked })}}

Check this example using onChange Example using onChange