Shortcode rendering above div that is put in

Hello everyone,
I’ve managed to create a custom post plugin and now I am trying to display the data using custom shortcode.
I understand that shortcodes work with return instead of echo/print. I am just wondering if anyone knows why the content gets displayed above the div I’ve put it in. It only happens when I display data from the database ( the_content() ). If the $output is only a string that I’ve typed manually, it works. What is wrong with the code?

Any help is much appreciated!

//[sustainability-plugin]
function sus_func( $atts ){

    $output = '';
    $args = array( 'post_type' => 'sustainability_post', 'posts_per_page' => 10 );
    $loop = new WP_Query( $args );

    $output .= '<div class="wrapper">';
    while ( $loop->have_posts() ) : $loop->the_post();
    $output .= '<div class="content">'. the_content() .'</div>';
    endwhile;
    $output .= '</div>';

    return $output;

}
add_shortcode( 'sustainability-plugin', 'sus_func' );