Reusable pop up throwing error at onclick event

Question

First post here, and newer to Javascript.

I have a node.js / express app that I am building and would like to re-use a yes no pop up in my front end by just changing some variables. The pop up works and displays the messages, but when I click the yes button I get

Uncaught ReferenceError: yesNoResponse is not defined at HTMLButtonElement.onclick

I am using parcel to bundle all my front end scripts, and I have tried declaring the function in multiple places including the index.js which is the root for my parcel bundle.

very confused on this one, any help is greatly appreciated.

export const showYesNo = (msg, secondaryMsg, onYes) => {

  function yesNoResponse(option) {
    if (option === 'overWrite') {
      console.log(option);
      hidePopUp();
    }
  }

  const markup = `<div id="popup-yesno" class="modal">
                    <div class="popup-container">
                      <div class="popup-inner-border">
                        <div class="popup-text-border">
                          ${msg}
                          <br />
                          ${secondaryMsg}
                        </div>
                        <div class="popup-button-container">
                          <button class="btn-popup-yes" id="popup-yes-button" onclick="yesNoResponse('${onYes}');">
                            Yes
                          </button>
                          <button class="btn-popup-no" id="popup-no-button" onclick="yesNoResponse('no');">
                            No
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>`;
  document.querySelector('body').insertAdjacentHTML('afterbegin', markup);
};