Reference value mutation under a nested object

[gokhantaskan]

I want to modify an object with title, description, and tools fields. Initially, tools is an array of objects:

type Tools = { id: number; name: string; icon: string }[]

I need to modify the object like the following:

const body = {
  ...values,
  tools: values.tools.map(tool => ({
    name: tool.name,
  })),
};

// {
//   title: "Front-end Development",
//   description:
//     "Since the beginning of my career in development...",
//   tools: [
//     {
//       name: "Vuejs",
//     },
//     {
//       name: "Typescript",
//     },
//   ],
// }

I can get the same result using immer. When I try to use defu, I get the following instead:

console.log(
  defu(
    {
      tools: values.tools.map(tool => ({
        name: tool.name,
      })),
    },
    values
  )
);

{
    "title": "Front-end Development",
    "description": "Since the beginning of my career in development...",
    "tools": [
        {
            "name": "Vuejs"
        },
        {
            "id": 136,
            "name": "Vuejs",
            "icon": "http://localhost:8000/media/icons/vuejs-original_WTLHaB6.svg"
        }
    ]
}

How can I achieve the first result using defu?