The assigned innerHTML results in a different structure

I tried assigning <p><div></div>Hello</p> to innerHTML, but it resulted in a different structure: <p></p><div></div>Hello<p></p>. Is this a bug or expected behavior? Can’t a <div> element be placed inside <p> element?

Code:

const div = document.createElement("div")
div.innerHTML = "<p><div></div>Hello</p>";
console.log(div.innerHTML);

Expected Output:

<p><div></div>Hello</p>

Result I get:

<p></p><div></div>Hello<p></p>