How to Filter custom post type by taxonomy?


here is my code trying to make it

  <div class="row"> <div class="col-lg-3 col-md-12"> <div class="card">     <div class="card-body">     <form action="<?php the_permalink() ?>" method="GET">   <?php  $  terms = get_terms([   'taxonomy' => 'topics',   'hide_empty' => false ]);  foreach ($  terms as $  term) :  ?>  <label>      <input       type="checkbox"       name="topics[]"       value="<?php echo $  term->slug; ?>"       <?php checked(         (isset($  _GET['topics']) && in_array($  term->slug, $  _GET['topics']))       ) ?>     />      <?php echo $  term->name; ?>    </label>  <?php endforeach; ?>   <button type="submit">Apply</button>  </form>      </div> </div>     </div><!--end of col1 -->     <div class="col-lg-9 col-md-12"> <div class="row"> <?php $  courses = new WP_Query(     array(         'post_type' => 'courses', // This is the name of your post type - change this as required,         'posts_per_page' => -1,         'tax_query' => array(                             array(                                 'taxonomy' => 'topics',                                 'field'    => 'slug',                                 'terms'    => $  term->slug,                                 'operator' => 'IN'                                 )         ) // This is the amount of posts per page you want to show     ) ); while ( $  courses->have_posts() ) : $  courses->the_post(); // The content you want to loop goes in here: ?> <div class="col-lg-6 col-md-12">                                 <div class="card shadow bounceIn"                                     style="margin-top: 10px; border: none; border-radius: 13px;">                                     <div class="card-header"                                         style="color: white; text-align: start; border-top-left-radius: 13px; border-top-right-radius: 13px; background-color: #EE225D;  border:none;">                                         <h6 style="padding-bottom: 0; margin-bottom: 0;"><?php the_title(); ?></h6>                                     </div>                                     <div class="card-body"                                         style="padding-top: 20px; padding-bottom: 20px; color: #2B2365;">                                         <h6 style="font-weight: 700;"><?php the_field('full_name'); ?></h6>                                         <p><?php echo wp_trim_words( get_the_content(), 30, '...' ); ?></p>                                         <a  href="<?php the_permalink(); ?>"                                             style="float:right; color: #EE225D; background-color: transparent; border-color: #EE225D;">View                                             Course</a>                                     </div>                                 </div>                             </div>  <?php endwhile; rewind_posts(); wp_reset_postdata(); ?>   </div>     </div><!--end of col2 --> </div> 

but when i refresh the page it keeps trying to load and when i remove function rewind_posts it load the page but filters not working i watched many videos trying to solve it but no success code explanation two columns one having the filters and second column having the posts