How to display the sum of total amount for selected records with bulk action?

TextColumn::make("amount")
                    ->prefix("$")

                    ->extraAttributes(function ($record) {
                        return [
                            'data-record-id' => $record->id,
                            'data-amount' => $record->amount, // or the column you want to sum
                        ];
                    })
                    ->sortable(),

public function booted(): void
    {
        FilamentView::registerRenderHook(
            TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE,
            fn() => view('components.driver-payment-selected-total-sum'),
            scopes: static::class
        );
    }

<div
    x-data="{
        sum: 0,
        updateSum() {
            this.sum = selectedRecords.reduce((total, id) => {
                const row = document.querySelector(`[data-record-id='${id}']`);
                return total + (row ? Number(row.dataset.amount) : 0);
            }, 0);
        }
    }"
    x-effect="updateSum()"
    x-show="selectedRecords.length > 0"
    class="px-4 py-2 bg-gray-100 rounded-md dark:bg-gray-800">
    <p class="text-sm text-gray-700 dark:text-gray-300" style="color:green; font-weight:bold;">
        Total Sum: $<span x-text="sum.toFixed(2)"></span>
    </p>
</div>