React js lodash set the state changes but the state is not updated

I should change the value of the element to a certain depth, I am using lodash, but I am having problems.

I make the copy of the object, and applying the lodash set on the copy I modify the original so you are.

I try to change the state, but it doesn't update.

You can help me out.

Link: codesandbox

Code:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import ReactJson from "react-json-view";
import lodash from "lodash";

const useStyles = makeStyles(theme => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      width: 200
    }
  }
}));

export default function BasicTextFields() {
  const classes = useStyles();

  const [state, setState] = React.useState({
    name: "James",
    surname: "bond",
    card: {
      id: 7,
      group: "J"
    },
    scope: [{ scope: "user", actions: ["create", "delete"] }]
  });

  const handleChangeField = field => ({ target: { value } }) => {
    let newState = Object.assign(state, {});
    console.log(state, field, value);
    lodash.set(newState, field, value);
    setState(newState);
  };

  console.log("Change", state);

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <ReactJson
        src={state}
        theme={"solarized"}
        enableClipboard={false}
        displayObjectSize={false}
      />

      <TextField
        id="standard-basic"
        label="Name"
        onChange={handleChangeField("name")}
      />
      <TextField
        id="standard-basic"
        label="Group"
        onChange={handleChangeField("card.group")}
      />
      <TextField
        id="standard-basic"
        label="Action[0]"
        onChange={handleChangeField("scope[0].actions[0]")}
      />
    </form>
  );
}