Why add new property on prototype is different from replace the prototype object in JavaScript

If I have a JavaScript constructor function:

function Foo() {}
Foo.prototype.bar = 123

Now I create a new object from Foo and change the bar property on prototype object.

const foo = new Foo()
Foo.prototype.bar = 321
console.log(foo.bar) // 321

But If I replace Foo.prototype with a object like this:

const foo = new Foo()
Foo.prototype = { bar: 321 }
console.log(foo.bar) // 123

Why the two code snippets’ output is different?