Livewire map not load on modal

I have just upgraded my livewire version from 2 to version 3 but one component works fine in version 2 but not worked in version 3.

v3

use App\Models\Order;
use Illuminate\Support\Carbon;
use Livewire\Component;

class Locator extends Component
{
    public string $date;

    public array $locations = [];

    public function mount()
    {
        $this->date = today()->toDateString();

        $this->getOrders($this->date);
    }

    public function prev()
    {
        $this->date = Carbon::parse($this->date)->subDay()->toDateString();

        $this->getOrders($this->date);

        $this->dispatch('date-changed', locations: $this->locations);
    }

    public function next()
    {
        $this->date = Carbon::parse($this->date)->addDay()->toDateString();

        $this->getOrders($this->date);

        $this->dispatch('date-changed', locations: $this->locations);
    }

    public function close()
    {
        $this->date = today()->toDateString();

        $this->getOrders($this->date);
    }

    private function getOrders(string $date): void
    {
        $orders = Order::where(function ($query) use ($date) {
            $query->whereNotNull('deliver_id');
            $query->whereNotNull('location');
            $query->whereDate('delivery_date', $date);
        })->get();

        if ($orders->isNotEmpty()) {
            $filterOrders = $orders->map(function ($item) {
                return [
                    'name' => "{$item->billing->first_name} {$item->billing->last_name}",
                    'address' => "{$item->billing->address_1} {$item->billing->city} {$item->billing->state} {$item->billing->country} {$item->billing->postcode}",
                    'phone' => $item->billing->phone,
                    'location' => $item->location,
                    'delivery_date' => "{$item->delivery_date->toDateString()} between {$item->start_time} - {$item->end_time}",
                ];
            });

            $this->locations = $filterOrders->all();
        } else {
            $this->locations = [];
        }
    }

    public function render()
    {
        return view('livewire.order.locator');
    }
}

<div>
    <div wire:ignore.self class="modal fade" id="maps" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="mapsDropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapsDropLabel">Map</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" wire:click="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="d-flex justify-content-between p-3">
                    <div>
                        <button class="btn btn-secondary" wire:click="prev">Prev</button>
                        <button class="btn btn-secondary" wire:click="next">Next</button>
                    </div>
                    <div>
                        <strong>{{ Carbon\Carbon::parse($date)->format('l jS F, Y') }}</strong>
                    </div>
                </div>

                <div id="info-div" class="pl-3 pr-3 text-bold"></div>

                <div class="modal-body">
                    <div id="map-canvas" style="height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
        var map;

        function initMap(locations) {
            var myMapCenter = {
                lat: -31.85736890221403,
                lng: 115.90570741046002
            };

            // Create a map object and specify the DOM element for display.
            var map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: myMapCenter,
                zoom: 9
            });

            new google.maps.Marker({
                map: map,
                position: myMapCenter,
                title: 'Skm Furniture',
                icon: '{{ asset('img/marker.png') }}'
            });


            function markLocation(locationInfo) {

                // Create a marker and set its position.
                var marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(parseFloat(locationInfo.location.lat), parseFloat(
                        locationInfo
                        .location.lng)),
                    title: locationInfo.name
                });

                // show location info when marker is clicked
                marker.addListener('click', function() {
                    showLocationInfo(locationInfo);
                });
            }

            // show store info in text box
            function showLocationInfo(locationInfo) {
                var info_div = document.getElementById('info-div');
                info_div.innerHTML = 'Customer Name: ' +
                    locationInfo.name +
                    '<br>Address: ' + locationInfo.address +
                    '<br>Phone: ' + locationInfo.phone +
                    '<br>Delivery Date: ' + locationInfo.delivery_date;
            }

            if (locations) {
                locations.forEach(location => markLocation(location));
            }
        }

        $('#maps').on('show.bs.modal', function() {
            initMap(@json($locations));

            google.maps.event.trigger(map, 'resize');
        });


        window.addEventListener('date-changed', event => {
            initMap(event.detail.locations);

            google.maps.event.trigger(map, 'resize');
        })
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?key=*********&loading=async&callback=initMap"
        async defer></script>
@endpush

Working in version 2 https://www.loom.com/share/764170657c4448eebbbab2a00a44e0f7?sid=b184ecf1-fcdc-4d2a-9006-c1b6e9bd2eb2

Not work in version 3 https://www.loom.com/share/c993b15bd14545a59b37e2a0aee9c2c0?sid=a72a801a-3841-424e-ad66-4fa710f022fe