Replace menu <a> tag with <button> tag

I have the following menu setup via header.php:

<?php
wp_nav_menu(
    array(
        'container' => false,
        'theme_location' => 'primary',
        'items_wrap' => '<ul class="header__nav-items">%3$s</ul>',
    )
);

This spits out the following on the front-end:

<ul class="header__nav-items">
    <li class="header__nav-item menu-item-has-children">
        <a href="#" class="header__nav-anchor">Parent</a><!-- I'd like to replace this <a> tag with a <button> tag. -->
        <ul class="header__sub-menu">
            <li class="header__nav-item"><a href="child-page-one" class="header__nav-anchor">Child Page One</a></li>
            <li class="header__nav-item"><a href="child-page-two" class="header__nav-anchor">Child Page Two</a></li>
            <li class="header__nav-item"><a href="child-page-three" class="header__nav-anchor">Child Page Three</a></li>
            <li class="header__nav-item"><a href="child-page-four" class="header__nav-anchor">Child Page Four</a></li>
        </ul>
    </li>
</ul>

I’ve implemented a custom field (with ACF) so that admin can select whether or not the menu item is a dropdown via WP-Admin.

I then have the following via functions.php:

<?php
function edit_menu_item( $items, $args ) {
    foreach( $items as $item ) {
        if ( get_field( 'dropdown', $item) == 'yes' ) {
            echo '<button class="nav__button>'.$item->title.'</button>';
        }
    }
    return $items;  
}
add_filter('wp_nav_menu_objects', 'edit_menu_item', 10, 2);

I was expecting the above to output the following on the front-end:

<ul class="header__nav-items">
    <li class="header__nav-item menu-item-has-children">
        <button class="header__button">Parent</button>
        <ul class="header__sub-menu">
            <li class="header__nav-item"><a href="child-page-one" class="header__nav-anchor">Child Page One</a></li>
            <li class="header__nav-item"><a href="child-page-two" class="header__nav-anchor">Child Page Two</a></li>
            <li class="header__nav-item"><a href="child-page-three" class="header__nav-anchor">Child Page Three</a></li>
            <li class="header__nav-item"><a href="child-page-four" class="header__nav-anchor">Child Page Four</a></li>
        </ul>
    </li>
</ul>

Instead, the button has been placed outside of the menu, like so:

<button class="header__button">Parent</button><!-- Button appearing here -->
<ul class="header__nav-items">
<!-- Rest of the markup -->

What am I doing wrong here?