Vehicle Marker not rotating with the css transform property on the map.

I am using mapbox gl in my react app. And for the vehicle I am having a car icon as a marker. With each lat and lon which I am receiving as prop , I am feeding that data to the marker element and adding it to map like below,
const markerElement = document.createElement('div');
markerElement.style.backgroundImage = url(${markerImgUrl})
markerElement.style.transform = rotate(${direction}deg); // direction is the angle getting received from geolocation api
const marker = new mapboxgl.Marker({ element: markerElement }).setLngLat(lnglat).addTo(map);

However, the transform property over the marker is not working and the vehicle marker is not rotating according to the direction provided in the transform property. Please guide how to resolve this issue.

No source file or test is named. Start by reproducing the shown React and mapbox-gl marker setup with a DOM element using style.transform, then inspect the marker rendering behavior. Done means the vehicle marker visibly follows the supplied direction angle without breaking map positioning.