Lists from a data table aren't being traversed and displayed properly- what's going wrong?

Question

Working on a project in AppLab in Code.org, and I'm trying to traverse and display individual elements of a data table one at a time. The user hits the next button, and it should display the next cat name and image, and when they hit the back button, it goes to the previous cat's info. However, it is displaying the entire list of cat names in the text box, and the setImageURL command isn't working.

//declare variables
var catName = [getColumn("Cats", "Name")];
var catTemper = [getColumn("Cats", "Temperament")];
var catImage = [getColumn("Cats", "Image")];
var index = 0;

    //Traversing/filtering the lists when the back or next button is chosen
    //next button
    onEvent("nextCatButton", "click", function( ) {
       if(index < (catName.length - 1)) {
         index = index + 1;
       }
      updateScreen();
    });
    //back button
    onEvent("backCatButton", "click", function( ) {
        if(index > 0){
          index = index - 1;
        }
      updateScreen();
    });
    ```
   
    ```
    //function to display cat name and image on screen 2
    function updateScreen() {
      setText("nameOutput1", catName[index]);
      setImageURL("imageOutput", catImage[index]);
     }

I originally tried filtering with a for loop and appending to a filtered list, but switched to using indexes as I thought it would be simpler.