How do you use the .addCircleLayer() in the latest Flutter Mapbox_gl version?

I am making a flutter website that fetches realtime location data from my firebase database and project them in my mapbox map. I was able to deal with using .addCircle() to individually add them to the map but it seems like the better approach is to use .addCircleLayer() since I am consistently updating multiple circles at the same time. I have searched over the internet for ways to use .addCircleLayer() but most of them looks outdated with methods that are no longer recognized to the current version.

Here is my code in projecting the locations one by one:

   void _projectVehiclePositions(List<VehicleData> Vehicles) {

    Vehicles.forEach((Vehicle) {
      final vehicleCircle = CircleOptions(
        geometry: LatLng(Vehicle.position.latitude, Vehicle.position.longitude),
      );
      _mapController.addCircle(vehicleCircle);
    });

   }

And here is my attempt to .addCircleLayer():

 void _projectVehiclePositions(List<LatLng> VehiclePositions) {
    String sourceId = 'PositionStream';
    String layerId = 'PositionStream';
    
    _mapController.addSource(sourceId, GeojsonSourceProperties(
      data: VehiclePositions,
    ));
    
    _mapController.addCircleLayer(sourceId, layerId, const CircleLayerProperties(
      circleColor: '#E91E63',
      circleRadius: 5.0,
      circleOpacity: 0.8,
      circleStrokeColor: '#E91E63'
    ));
    
  }

I preprocess the data first into one List<LatLng> of vehicle positions before I pass it to the function responsible of adding the circle layer. So far, it doesn't work at the moment.

i've provided below code. implement accordingly.

import 'package:flutter/material.dart';
import 'package:flutter_mapbox_gl/flutter_mapbox_gl.dart';
class MapPage extends StatefulWidget {
const MapPage({Key? key}) : super(key: key);
@override
_MapPageState createState() => _MapPageState();
}
class _MapPageState extends State<MapPage> {
MapboxMapController? _mapController;
final String accessToken =
'MAPBOX_ACCESS_TOKEN'; // add your token key
final LatLng initialCameraPosition = LatLng(37.7749, -122.4194); 
final List<LatLng> vehiclePositions = [
LatLng(37.7749, -122.4194),
LatLng(37.7849, -122.4194),
LatLng(37.7949, -122.4194),
LatLng(37.8049, -122.4194),
LatLng(37.8149, -122.4194),
];
void _onMapCreated(MapboxMapController controller) {
_mapController = controller;
}
void _addVehiclePositions(List<LatLng> positions) {
String sourceId = 'vehiclePositions';
String layerId = 'vehiclePositions';
GeoJsonSource source = GeoJsonSource(sourceId, data: {
'type': 'FeatureCollection',
'features': positions.map((position) {
return {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [position.longitude, position.latitude]
}
};
}).toList()
});
CircleLayer circleLayer = CircleLayer(layerId, sourceId);
circleLayer.circleColor = "#007cbf";
circleLayer.circleRadius = 5;
_mapController?.addSource(sourceId, source);
_mapController?.addLayer(circleLayer);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Map Page'),
),
body: MapboxMap(
accessToken: accessToken,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: initialCameraPosition,
zoom: 12,
),
styleString: MapboxStyles.MAPBOX_STREETS,
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_addVehiclePositions(vehiclePositions);
},
child: const Icon(Icons.add),
),
);
}
}

let me know if you face any issue.