Post counter in query with paged pages

<?php
// Add an element that shows the post number and total, e.g. 1 of 28
// to the top of each post item.
// Note: if you are using the Listing Builder, but not in Dev mode, you can also do this with JavaScript:
// https://gist.facetwp.com/gist/post-counter-in-listing-builder-query-with-paged-pages/


$args = [
  'post_type'      => [ 'post' ],
  'posts_per_page' => 6,
  'orderby'        => [ 'title' => 'ASC' ],
  'facetwp'        => true,
];

$my_query = new WP_Query( $args );
?>

  <div class="facetwp-template">

    <?php
    if ( $my_query->have_posts() ) {

      $perpage = FWP()->facet->pager_args['per_page'];
      $total = FWP()->facet->pager_args['total_rows'];

      $counter = 0;

      while ( $my_query->have_posts() ) : $my_query->the_post();

        $page = FWP()->facet->pager_args['page'];

        if ( $perpage < $total ) {
          $firstofpage = ( 1 + ( ( $page - 1 ) * $perpage ) );
        } else {
          $firstofpage = ( 0 < $total ) ? 1 : 0;
        }
        $counter_paged = $counter + $firstofpage;

        echo "<div>";
        echo $counter_paged . ' of ' . $total;
        echo '<p>' . get_the_title() . '</p>';
        echo "</div>";

        $counter ++;

      endwhile;

    } else {
      _e( 'Sorry, no posts matched your criteriax.' );
    }

    wp_reset_postdata();
    ?>

  </div>

<?php

get_footer(); // Make sure to this is included in your template at the bottom