I want to know why the following 2 codes are giving different outputs.

Code 1:

const motherPromise = new Promise((resolve, reject) => {
  reject(new Error("Milk has spilled due to overboiling"));
});

motherPromise.catch((rejectValue) => console.log("Hello"));

Output of Code 1:

Hello

Code 2:

const motherPromise = new Promise((resolve, reject) => {
  reject(new Error("Milk has spilled due to overboiling"));
});

motherPromise.then((resolveValue) =>
  console.log(`${resolveValue} and Stove was shut`)
);
motherPromise.catch((rejectValue) => console.log("Hello"));

Output of Code 2:

Hello
Uncaught (in promise) Error: Milk has spilled due to overboiling
    at app.js:2:10
    at new Promise (<anonymous>)
    at app.js:1:23

What is the flow of control in both the codes and why is an extra Error being generated in the console for the second code?