CKEditor5 heading tag levels - ckeditor5

Question

I have been looking to use CKE5 for a new project (having used a rival HTML editor for many years).
In looking at the samples on the CKE site (https://ckeditor.com/docs/ckeditor5/latest/examples/builds/balloon-editor.html) I am puzzled by the HTML being rendered.
In the example on the page, if I click on "Walking the capitals of Europe: Warsaw" to show the context menu, the line seems to be a Heading 1.
When I inspect the line (with Edge Inspect), it is rendered as a h2.
In my only simple BalloonEditor test HTML page to do a getData() on the editor div, it shows the same problem - the rendered HTML is one level down on the heading tags. The h1 tag I put into the editor div comes out as a h2 with getData().
Why is this the case?
How can I get CKE5 (out of the box) to render tags as shown by the context menu?
Here is my BalloonEditor test HTML page borrowed from the CKE5 site:
<script src="https://cdn.ckeditor.com/ckeditor5/35.2.0/balloon/ckeditor.js"></script>
<p><button type="button" id="ButtonSave">Save</button></p>
<div id="HTML_Editor_Details">
<h1>Heading 1</h1>
<p>This is Details content.</p>
</div>
<input type="text" id="FormFieldDetails" />
<script>
BalloonEditor
.create(document.querySelector('#HTML_Editor_Details'))
.then(newEditor =>
{
HTML_Editor_Details = newEditor;
})
.catch(error =>
{
console.error(error);
});
document.querySelector('#ButtonSave').addEventListener('click', OnSave);
function OnSave()
{
data = HTML_Editor_Details.getData();
FormFieldDetails.value = data;
}
</script>
Many thanks for any help, Peter.