You can use previous_posts_link and next_posts_link.
<nav id="post-pagination" class="navigation" role="navigation">
<div class="nav-previous">
<?php next_posts_link( '← Older', $the_query->max_num_pages ); ?>
</div>
<div class="nav-next">
<?php previous_posts_link( 'Newer →' ); ?>
</div>
</nav>
It’s not important but Next and Previous have the opposite classes (.nav-previous on next_posts_link() & .nav-next on previous_posts_link()) because:
Because post queries are usually sorted in reverse chronological order, next_posts_link() usually points to older entries (toward the end of the set) and previous_posts_link() usually points to newer entries (toward the beginning of the set).
Update
Based on your code, something like this should work (although I’m not sure what’s wrong with the original the_posts_pagination?):
<?php
// Start the Loop.
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
// End the loop.
endwhile;
?>
<nav id="post-pagination" class="navigation" role="navigation">
<div class="nav-previous">
<?php next_posts_link( '← Older', $the_query->max_num_pages ); ?>
</div>
<div class="nav-next">
<?php previous_posts_link( 'Newer →' ); ?>
</div>
</nav>
<?php
// If no content, include the "No posts found" template.
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>