Hoisting vs Scope Chain

How come, in the first block of code, I get “Hello”, but in the second block of code, I get undefined, then “bye”?

For the first block of code, I get that it is going up the scope chain to get the hoisted variable “Hello”, which I get the expected result.

    var greet = "Hello";

    var sayHi = () => {
        console.log(greet);
    }

    sayHi();

However, I’m struggling to understand how come, if I declare the variable greet after the first instance of console.log, I get undefined first? Shouldn’t the JS engine go up the scope chain to find “Hello” first?

        var greet = "Hello";

    var sayHi = () => {
        console.log(greet);

        var greet = "Bye"; 
        console.log(greet);
    }

    sayHi();