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

[akash-sidd1218]

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.