Group Product Types

I am using Advanced Custom Fields and I am attempting to group together the custom post types with a similar value from a dropdown field. As an example. Other would-be its own heading and projectors would have 1 heading with two items.

Here is how I have set up ACF

Here is my output

Here is the code I have so far.

<?php

/*
Template Name: Products By Brand
Template Post Type: Brand
*/

get_header();


//new 

// args - get all the brands, filtered by audience
$args = array(
    'numberposts'   => -1,
  'post_type'   => array('brand', 'products'),
);
$loop = new WP_Query( $args );
$counter=0;
$total_posts = $loop->post_count;
$column_divide = 4;


// query
$the_query = new WP_Query( $args );

?>

<div class="fl-content-full container">
    <div class="row">
        <div class="fl-content col-md-12">
        <div class="fl-row fl-row-full-width fl-row-bg-none">
        <div class="fl-row-content-wrap">
        <div class="fl-row-content fl-row-fixed-width">


<div class="row">
    <div class="col-lg-12">
        <?php echo get_the_post_thumbnail( get_the_ID(), 'medium' ); ?>
        <p>product summary <?php the_field('product_summary'); ?></p>
        <p>manufacture website <?php the_field('website_url_en'); ?></p>
    </div>
</div>


<div class="row">
    <?php
    if( $the_query->have_posts()):
    while ( $the_query->have_posts() ) : $the_query->the_post(); $counter++;

    $brand_association = get_field('brand_association');
    $product_type = get_field('product_type');
    if( $brand_association ):
    ?>

    <div class="col-lg-12">
        <h2><?php the_field('product_type') ?></h2>
    </div>
    <div class="col-lg-3">
        <p><img src="<?php the_field('product_image') ?>"/></p>
        <p><?php the_field('product_details') ?></p>
        <p><a href="<?php the_field('hyperlink_to_product_page') ?>">Product Web Page</a></p>
        <p><a href="<?php the_field('hyperlink_to_specifications') ?>">Product Sepcifications</a></p>   
    <?php endif; ?>
    </div>
    
<?php
  if($counter % $column_divide == 0) echo '<div class="row">';
    endwhile;
    endif;
    wp_reset_postdata();
?>

</div><!-- END .col-lg-12-->

            </div><!-- END .row -->
        </div>
        </div><!-- END .fl-content .col-lg-12-->
    </div><!-- END .row -->
</div><!-- END .fl-content-full .container -->


        <h1>hero banner - using beaver themer</h1>


<?php get_footer(); ?>