Flutter Google Maps as Hero Widget

Question

I'm trying to develop an app that on the homepage has a Stack. On the background theres a Google Maps Widget and on top of it some buttons. One of the buttons is a "full-screen" button. I'm trying to make a smooth transition between the "normal view" and the "full screen view" putting the GoogleMaps Widget inside a Hero Widget. The issue is that when the page is changed the map gets rendered all overagain insted of just staying as it was. What's the best way to achieve this?

The Home View:

class HomeView extends StatelessWidget {
 const HomeView({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
  const double columnWidth = 250;

  return Scaffold(
   body: Stack(
    children: [
      const Hero(
        tag: 'map',
        child: HomeMap(),
        ),
      ElevatedButton(
        onTap: ()=> Navigator.push(context, MaterialPageRoute(builder: (context) => const FullScreeenMapView()),),
        child: Text('Fullscreen')
      ),
     ],
    ),
  );
 }
}

The Map:

class HomeMap extends StatefulWidget {
 const HomeMap({
  Key? key,
 }) : super(key: key);

 @override
 State<HomeMap> createState() => _HomeMapState();
}

class _HomeMapState extends State<HomeMap>{
 @override
 Widget build(BuildContext context) {
  return SizedBox(
  height: MediaQuery.of(context).size.height,
  width: double.infinity,
  child: const GoogleMap(
    myLocationEnabled: true,
    initialCameraPosition: CameraPosition(
      target: LatLng(0, 0),
      zoom: 16,
    ),
   ),
  );
 }
}

And the second Page:

class FullScreeenMapView extends StatelessWidget {
 const FullScreeenMapView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
   return Scaffold(
    body: Stack(
     children: const [
       Hero(
        tag: 'map',
        child: HomeMap(),
      ),
     ],
    ),
   );
  }
 }

Thanks in advance. Cheers!!!