请假老师，为什么用了shallowReactive， 但点击modify时候，深层次friend.age仍旧被修改了，thanks！

<script setup>
import { reactive, ref, shallowReactive } from 'vue';

const profile = {
    name: "daniel",
    age: 18,
    friend: {
        name: "karen",
        age: 22
    }
}

// const myProfile = ref(profile)
// const myProfile = reactive(profile)
const myProfile = shallowReactive(
    {
        name: "daniel",
        age: 18,
        friend: {
            name: "karen",
            age: 1
        }
    }
)
const modify = () => {
    myProfile.age = myProfile.age + '1'
    myProfile.friend.age = myProfile.friend.age + '1'
}
</script>

<template>
<P> HELLO </P>
<p>{{ myProfile }}</p>
<button @click="modify">Modify</button>
</template>