Ember JS Issues With Trying To Pass an Action Into a Named Block

I'm trying to make a modal component from scratch in ember js and I'm running into an issue with the button to open the modal. I want to allow the open button to be passed to the component using a block called <:buttonContent></:buttonContent> and pass in the function to open the modal. For some reason with this approach the open action only works once and then the button does nothing when clicking it. I can see that the button state is correct and it works as expected if I use a button directly in the modal component.

<Modal>
    <:buttonContent as |action|>
        <Button::Basic @action=>
            AddCoin
        </Button::Basic>
    </:buttonContent>
    <:default>
    </:default>
</Modal>

    



    <div class="curtain">
    </div>



    <div class=  >
        <Button::Icon @icon="close" @action= class="close-button"></Button::Icon>
        <div class="modal-content">
            
        </div>
    </div>

// component controller

import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ModalComponent extends Component {

    @tracked isOpen= false;

    focusTrapOptions = {
        allowOutsideClick: this.clickOutside
    }

    @action clickOutside(): boolean {
        this.close();
        return false;
    }
    
    @action open(): void {
        this.isOpen = true;
    }

    @action close(): void {
        this.isOpen = false;
    }
}

I tried putting in a debugger breakpoint on the action and can see that it gets hit on the first call but all subsequent calls don't trigger it. I can also tell that other buttons still work on the page even though the open modal button doesn't.