Markers aren't updating when items changed

[berkeenesakt]

I write a code that only shows items on visible region. But the markers are not showing on map even it shows on bottom tile after moving the map and changing the visible region.

My code:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_utils/utils/spherical_utils.dart';
import 'package:interactive_maps_marker/interactive_maps_marker.dart';

import 'widgets/bottom_tile.dart';

class LazyLoadingUsage extends StatefulWidget {
  @override
  State<LazyLoadingUsage> createState() => _LazyLoadingUsageState();
}

class _LazyLoadingUsageState extends State<LazyLoadingUsage> {
  List<MarkerItem> markers = []
    ..add(MarkerItem(id: 1, latitude: 31.4673274, longitude: 74.2637687))
    ..add(MarkerItem(id: 2, latitude: 31.4718461, longitude: 74.3531591))
    ..add(MarkerItem(id: 3, latitude: 31.5325107, longitude: 74.3610325))
    ..add(MarkerItem(id: 4, latitude: 31.4668809, longitude: 74.31354));

  List<MarkerItem> markersShown = []
    ..add(MarkerItem(id: 1, latitude: 31.4673274, longitude: 74.2637687))
    ..add(MarkerItem(id: 2, latitude: 31.4718461, longitude: 74.3531591))
    ..add(MarkerItem(id: 3, latitude: 31.5325107, longitude: 74.3610325))
    ..add(MarkerItem(id: 4, latitude: 31.4668809, longitude: 74.31354));

  CameraPosition? cameraPosition;

  final InteractiveMapsController mapController = InteractiveMapsController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lazy Loading Usage'),
      ),
      body: InteractiveMapsMarker(
        controller: mapController,
        items: markersShown,
        onCameraMove: (p0) async {
          final bounds =
              await mapController.getMapController()!.getVisibleRegion();
          LatLng northeast = bounds.northeast;
          LatLng southwest = bounds.southwest;
          Point center = Point((northeast.latitude + southwest.latitude) / 2,
              (northeast.longitude + southwest.longitude) / 2);
          Point northEastPoint = Point(northeast.latitude, northeast.longitude);
          //calculate the radius of visible region
          final radius =
              SphericalUtils.computeDistanceBetween(center, northEastPoint);
          //filter the markers which are visible in the visible region
          markersShown = markers
              .where((element) =>
                  SphericalUtils.computeDistanceBetween(
                      center, Point(element.latitude, element.longitude)) <
                  radius)
              .toList();
          setState(() {});
        },
        center: LatLng(31.4906504, 74.319872),
        itemContent: (context, index) {
          MarkerItem item = markersShown[index];
          return BottomTile(item: item);
        },
      ),
    );
  }
}

trim.A8EE8321-4FA7-406D-8509-DA25A8E4E4F2.MOV