GeolocateControl heading does not work outside of mapbox docs example

mapbox-gl-js version: 2.6.1

browser: Chrome

Steps to Trigger Behavior

1. Go to: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/
2. Notice that the heading arrow will show
3. Click on the codepen link
4. Notice how it no longer works

Link to Demonstration

https://codepen.io/douglasg14b/pen/zYEaMqQ

Expected Behavior

The heading arrow shows.

Actual Behavior

It does not.

More Info

I have been largely unable to get the heading to work in mapbox. Even copy/pasting the code directly from the example docs linked above verbatim to my app does not work. Even the codepen link doesn't have a heading arrow. It only seems to exist and work in the example docs, but nowhere else?

I've tried on several phones to no effect.

Going into the dev tools and fiddling around with the sensors doesn't seem to have any effect either:

Why is this? How is this feature supposed to work?

Reproduce the behavior using the locate-user documentation example and the linked CodePen, then start from the GeolocateControl implementation and compare the two environments. Check why the heading arrow appears in the docs example but not in the standalone example across Chrome and phones. Done means heading works outside the documentation example or the required conditions are documented.