WordPress custom fields outside html labels

I’ve created a custom field with Advanced Custom Fields plugin called ‘colaboradores’ with fields logo (image), direccion (string) and mapa (image);

In archive-colaboradores.php, I call the WP_Quer. In short, code is:

<?php
    $args = array(
        'post_type' => 'colaboradores',
        'pagination' => false
    ); ?>

    <?php $the_query = new WP_Query( $args ); ?>

    <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', 'colaboradores' ); ?>

    <?php endwhile; // end of the loop. ?>

So in content-colaboradores.php I show my custom fields with the_field():

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

<?php $image = get_field( 'logo' ); ?>
<?php echo '<img src="' . $image['url'] . '" >'; ?>

<?php echo '<p>' . the_field('direccion') . '</p>'; ?>

<?php $image = get_field( 'mapa' ); ?>
<?php echo '<img src="' . $image['url'] . '" >'; ?>

</article><!-- #post-## -->

Everything is fine except direccion, which is always outside the

tag checking with Google Chrome:

<img src="https://i.stack.imgur.com/3ogWP.jpg" alt="address is outside the

tags”>

I’ve removed all the code previous to ‘ . the_field(‘direccion’) . ‘

‘; ?> but the problem persists.

Do you know why is it hapening? Thanks.