How to remove a boxhelper after adding it

I have a toggle button. when i click on it, it should draw a bounding box and when i toggle it off, it should remove th ebounding box. At the moment it draws the bounding box fine but when i click on the button again to rmeove it, it doesnt remove anything.

const helper = new THREE.BoxHelper();

scene.add( helper );

button.addEventListener( 'click',  ( e ) => {

    e.preventDEfault();
    
    helper.visible = ! helper.visible;

}, false  );