Declaring variable with same name as lexical scope results ReferenceError [duplicate]

Question

I am sure the question title is complicated but my problem is a little bit tough. I will also try to be instructive in this question.

I am working on a new blog post about hoisting but I am stuck with a question.

Lets first give an example of hoisting.

function logCar() {
  console.log('Car: ' + carName);
}
logCar();
var carName = 'Yoyota';

So we expect a log without an error: Car: undefined. Behind the scene, it is being converted to the code below.

var carName;
function logCar(){
   console.log('Car: ' + carName)
}
logCar();
carName = 'Yoyota';

So it is working without an exception. Let's try using let which is not hoisted.

function logCar() {
  console.log('Car: ' + carName);
}
logCar();
let carName = 'Yoyota';

This code immediately throws a ReferenceError: carName is not defined. So I can clearly understand that let is not hoisted. let carName; is not being moved to the top of block scope.

Then I wanted to use parent scope as a lexical scope of logCar and it works perfectly and outputs Yoyota without an error.

let car = 'Yoyota';
const logCar = () => {
  console.log(car);
}
logCar();

As I am using let I can also change the car name for my logCar scope without affecting parent.

let car = 'Yoyota';
const logCar = () => {
  let car = 'MWB';
  console.log(car);
}
logCar();
console.log(car);

It outputs exactly what I am expecting. First 'MWB', then 'Yoyota'. Then, I wanted to redeclare variable car in logCar scope but before declaring it I wanted to use the variable from lexical scope.

let car = 'Yoyota';
const logCar = () => {
  console.log(car); // ReferenceError: car is not defined
  let car = 'MWB';
  console.log(car);
}
logCar();

Then I got a ReferenceError: car is not defined error. But why? car should be defined on the lexical scope as it works on the previous example? Why adding let car = 'MWB' to that scope makes it throw error while let is not being hoisted?