(jsPsych) How can I get access to the user response before the trial finishes?

Question

I have a html-button-response trial that shows images and takes user input from clicking the button. I want to know what response the user gave BEFORE the trial ends. I can't find this anywhere in the docs or issues. I know there is a way to get it from the data object passed to certain callbacks but on_load does not have that. I need the response so that I can play audio feedback after click. The way I am handling this is using the on_load trial callback and adding a click event to the buttons as soon as the trial loads. The callback for the click event is where I need access to the response.

Here is my code to give an idea of what I am trying to do:

on_load: () => {
      const buttonsGroupElement = document.getElementById("jspsych-html-button-response-btngroup")
      const buttonsContainerList = buttonsGroupElement.children
      const containerListArray = Array.from(buttonsContainerList)


      containerListArray.forEach((container) => {
        const button = container.children.item(0)

        button.addEventListener("click", () => {

          const lastTrialIdx = jsPsych.data.getLastTrialData().trials[0].trial_index + 1

          const prevResponse = jsPsych.data.allData.trials[lastTrialIdx]

          
         if (prevResponse) {
           // play correct audio
         } else {
           // play incorrect audio
         }

          // buffer to give enough time for the audio to play
          setTimeout(() => jsPsych.finishTrial(), 390)
        })
      })

I have tried different ways of getting the trial data but can't seem to find a way to get it. I thought the approach above would work but although jsPsych.data.allData.trials is all the current trials, when I try accessing the current one it says it is undefined.

How can I get the user response after click?