getSelection().collapseToEnd() does not work

What I am trying to do is move the caret to the end of the string when the element is focused.

collapseToEnd() does not work. Instead, if you uncomment getSelection().collapseToEnd(), it seems to remove the selection altogether or favors the user selection.

Any help would be greatly appreciated.

const div = document.querySelector('div')

div.addEventListener('focus', moveCaretToEnd)

function moveCaretToEnd() {
  getSelection().setBaseAndExtent(
    div.childNodes[0], div.textContent.length,
    div.childNodes[0], div.textContent.length-1
  )
  // getSelection().collapseToEnd()
}
div {
  width: 500px;
  height: 150px;
  font-size:  3rem;
  background: skyblue;
}
<div contenteditable>This is a test</div>