destructured object not accesible in of statement

My code looks like this it's aiming to observe a modal content when it's open

const data = {
   modal: false,
   button: null
};

const updateData = () => {
   const {modal, button} = data

   if (document.querySelector('.modal')) {
       modal = true
       button = document.querySelector('.modalButton')
   }
};

I get the following error when I call updateData():

Uncaught ReferenceError: modal is not defined"

It works as intended when it's written like this:

const updateData = () => {

    if (document.querySelector('.modal')) {
        data.modal = true
        data.button = document.querySelector('.modalButton')
    }
};

I can't understand why destructured data isn't accessible in the if statement.