The biggest issue you’re running into is putting the_custom_logo() inside of an <img> tag. The function already outputs a full image tag, plus a link to the homepage wrapped around it. So, replace this
<a class="navbar-brand" href="#" >
<img src="<?php the_custom_logo(); ?>" height="42" width="42">
</a>
with this
<?php the_custom_logo(); ?>
to get rid of the first and third arrow in your screenshot.