Google Directions Waypoints Not being read dynamically

I followed Brians video: Using the Google Directions Component with static and dynamic data

1. I can use the same API query and the dynamic markers are created in the Google maps.
   a. remove all that excess data and add the Directions Component and I get nothing.
2. Manually entering the map center, origin and destination gives me three waypoints but none of the dynamic points.
3. I get this error 10 times in the console, I have 12 way points: https://chromestatus.com/feature/5745543795965952

<dmx-serverconnect id="sc_Cigars" url="/api/qry/qryCigarSites_URLs"></dmx-serverconnect>
<dmx-query-manager id="query1"></dmx-query-manager><!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="guideRoute" appConnect="local" components="{dmxGoogleDirections:{},dmxGoogleMaps:{},dmxBootstrap5TableGenerator:{},dmxStateManagement:{},dmxMoment:{}}" moment_2="cdn" -->


<div class="container" id="mapAndRoute">

    <div class="row">
        <div class="col">

            <dmx-google-maps id="maps1" maptype-control="true" streetview-control="true" zoom-control="true" fullscreen-control="true" scale-control="true" rotate-control="true" tilt="true" scrollwheel="true" address="1901 Fogarty Ave, Key West, FL 33040" height="500" marker-id="$index" marker-address="streetAddress+', key west, fl'" enable-clusters="true" zoom="14" marker-label="markerName">
            </dmx-google-maps>
            <dmx-google-directions id="dir1" map="maps1" dmx-bind:waypoints="tableRepeat2[0].streetAddress+', key west, fl'" dynamic-update="true" origin="1 duval, key west, fl" destination="400 duval, key west, fl">
            </dmx-google-directions>
        </div>
    </div>
</div>

<div class="container" id="dataTable">
    <div class="row">
        <div class="col">
            <div class="table-responsive">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th class="sorting" dmx-on:click="query1.set('offset','streetAddress');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='streetAddress' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='streetAddress' && query1.data.offset == 'desc'">Street address</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','markerName');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='markerName' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='markerName' && query1.data.offset == 'desc'">Marker name</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','markerNumber');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='markerNumber' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='markerNumber' && query1.data.offset == 'desc'">Marker number</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','yearCirca');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='yearCirca' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='yearCirca' && query1.data.offset == 'desc'">Year circa</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','markerThumb');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='markerThumb' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='markerThumb' && query1.data.offset == 'desc'">Marker thumb</th>
                            <th class="sorting" dmx-on:click="query1.set('offset','imageURL');query1.set('offset',query1.data.offset == 'desc' ? 'asc' : 'desc')" dmx-class:sorting_asc="query1.data.offset=='imageURL' && query1.data.offset == 'asc'" dmx-class:sorting_desc="query1.data.offset=='imageURL' && query1.data.offset == 'desc'">Image url</th>
                        </tr>
                    </thead>
                    <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="sc_Cigars.data.query" id="tableRepeat2" dmx-state="query1" dmx-sort="offset" dmx-order="offset">
                        <tr>
                            <td dmx-text="streetAddress"></td>
                            <td dmx-text="markerName"></td>
                            <td dmx-text="markerNumber"></td>
                            <td dmx-text="yearCirca"></td>
                            <td dmx-text="markerThumb"></td>
                            <td dmx-text="imageURL"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<meta name="ac:route" content="/guideRoute">