I am new to Svelte. I have a question in reactivity section?

<script>
    let numbers = [1, 2, 3, 4];
    let obj = {
        foo:{
            bar: "bar"
        }
    }
    function addNumber() {
        numbers.push(numbers.length + 1);
        numbers = numbers;
    }
    
    const changeToBaz = (tempObj) => {
        tempObj.foo.bar = 'bazz';
    }

    $: sum = numbers.reduce((t, n) => t + n, 0);
    $:{
        console.log('sum: ', sum);
        console.log('obj: ', obj);
        changeToBaz(obj);
      }
</script>

<p>{numbers.join(' + ')} = {sum}</p>
<p>{obj.foo.bar}</p>

<button on:click={addNumber}>
    Add a number
</button>

I want to know why the obj.foo.bar is showing bazz ? I am passing the obj state to changeToBaz function and changing the value of bar property. I thought that by changing the value of tempObj.foo.bar will not trigger render as I am not doing obj = tempObj , and I also want to know why in the console the value of obj.foo.bar = “bazz” ,the console is before the calling of changeToBazz function

Here is the screenshot of the page
Page screenshot