I'm trying to display the users position and the heading indicator in React-mapbox-gl.

import * as React from "react";
import ReactMapGL, { GeolocateControl } from "react-map-gl";

const geolocateControlStyle = {
  right: 10,
  top: 10
};

function App() {
  const [viewport, setViewport] = React.useState({
    longitude: -122.45,
    latitude: 37.78,
    zoom: 14
  });
  return (
    <ReactMapGL
      {...viewport}
      width="80vw"
      height="80vh"
      onViewportChange={setViewport}
      mapboxApiAccessToken={
        "<token here>"
      }
    >
      <GeolocateControl
        style={geolocateControlStyle}
        positionOptions={{ enableHighAccuracy: true }}
        trackUserLocation={true}
        auto
      />
    </ReactMapGL>
  );
}

Currently I only have where the user is, not its current heading.

What I want is to display the current heading, like this:,

I've found the option for adding the heading indicator on the docs(https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol), and there's an option for showUserHeading inm the react wrapper. And I can't wrap my head around how to add this option in the react wrapper?

Here's the GeoLocation props documentation: https://visgl.github.io/react-map-gl/docs/api-reference/geolocate-control