Using lodash/set on a React.useState object

Question

when using React.useState, I can't mutate the object before using the setState method.

for example:

const [buffer, setBuffer] = React.useState(props.someObject);

function handleChange(field: string, data: someObject) {
 const update = lodash.set(buffer, field, data);
 setBuffer(update);
}

const update never gets the updated data at the path of field. If field is something like "path/path/value" just using setBuffer isn't simple without the help of lodash.set

I know I can do const update = lodash.set(lodash.cloneDeep(buffer), field, data); but that is expensive, especially when we're talking about handleChange being called on every user interaction with a form.

Any alternative approaches or insights into why updates on React.useState objects don't work is much appreciated!