如何将Turf.js squareGrid图层添加到mapbox gl？

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="https://unpkg.com/@turf/turf@latest"></script>

<div id="map"></div>

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: zoomLevel
});

var options = { units: 'kilometers' }; // 可根据需要调整单位
var grid = turf.squareGrid([minX, minY, maxX, maxY], cellSize, options);

map.on('load', function() {
  map.addSource('grid', {
    type: 'geojson',
    data: grid
  });

  map.addLayer({
    id: 'grid-layer',
    type: 'fill',
    source: 'grid',
    paint: {
      'fill-color': '#ff0000',
      'fill-opacity': 0.5
    }
  });
});