Custom Post Type Pagination Not Working On Archive Page

I’ve spent the last 3 hours trying to get pagination to show up on my custom post type archive page.

I sort of understand that pagination only works with a default loop and once you modify the loop, it sort of breaks.

Anyways, I was hoping you could point me in the right direction.

<div class="row text-center small-up-1 medium-up-2 large-up-3 small_section">

  <?php $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; ?>

  <!-- Arguments for Loop -->
  <?php $args = array(
    'post_type' => 'portfolio',
    'posts_per_page' => 6,
    'paged' => $paged,    
  ); ?>

  <!-- Setting Up the Query -->
  <?php $work = new WP_Query( $args ); ?>

  <?php if ( $work->have_posts() ) : while ( $work->have_posts() ) : $work->the_post(); ?>
  <div class="columns"> 
    <div class="box relative">
      <a class="overlay" href="https://wordpress.stackexchange.com/questions/222471/<?php the_permalink(); ?>">
        <div class="vertical_align">
          <h5><?php the_title();?></h5>
          <p>asdas, asd, asddasds</p>
        </div>
      </a>
     <?php the_post_thumbnail(); ?>
    </div>
  </div>
  <?php endwhile; ?>

  <!-- Pagination Goes Here -->
  <div class="row">
    <div class="small-12 columns">
    <?php
    the_posts_pagination( array(
      'mid_size'  => 2,
      'prev_text' => 'Previous',
      'next_text' => 'Next',
    ) );?>
    </div>
  </div>
  <?php wp_reset_postdata();
  else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>
</div>

Modify main query on post type archive page

Instead of direct modify main query, just use normal loop ( you can create post type template, in your case archive-portofolio.php ), and run your modifying query under filter pre_get_posts.

Your normal loop on archive-portfolio.php

<div class="row text-center small-up-1 medium-up-2 large-up-3 small_section">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <div class="columns"> 
    <div class="box relative">
      <a class="overlay" href="<?php the_permalink(); ?>">
        <div class="vertical_align">
          <h5><?php the_title();?></h5>
         <!-- YOUR ANOTHER STUFF -->
        </div>
      </a>
     <?php the_post_thumbnail(); ?>
    </div>
  </div>
  <?php endwhile; ?>

  <!-- Pagination Goes Here -->
  <div class="row">
    <div class="small-12 columns">
    <?php
        the_posts_pagination( array(
            'mid_size'  => 2,
            'prev_text' => 'Previous',
            'next_text' => 'Next',
        ) );
    ?>
    </div>
  </div>
  <?php else : ?>
  <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <?php endif; ?>
</div>

Modifying query post type in functions.php

add_action( 'pre_get_posts' ,'wpse222471_query_post_type_portofolio', 1, 1 );
function wpse222471_query_post_type_portofolio( $query )
{
    if ( ! is_admin() && is_post_type_archive( 'portofolio' ) && $query->is_main_query() )
    {
        $query->set( 'posts_per_page', 6 ); //set query arg ( key, value )
    }
}