JSON Parse error unexpected token - Expanding menu

Question

I need some help clarifying some things. I made this collection trying to follow the wix tutorial on this --> https://support.wix.com/en/article/velo-tutorial-creating-an-expanding-mega-menu#step-2-when-the-page-loads

With the main difference that I dont want my menu to be a double expandable menu but only expand once (example for men to show men products all of them) My website that im trying to work this on is this one for reference: https://giannisliko.wixsite.com/my-site-1

Nextly I made this collection which at first I made the subSubItems as arrays to store the json obj but now changed it to text since I read that it shouldnt be arrays. Pictures as follows:

While the menu looks like this:

Main problem: When I am trying to call the main function to insert data into the repeaters above I get this error which I do now know which direction to head to in order to fix it. Im attaching the code and the error below as follows:

$w.onReady(async () => {
    
  //Get the menu data from the collection.
  menuData = await wixData.query("SubTitlesCollection").find().then(result => result.items);
  //console.log(menuData);
  //Set up each Submenu 2 repeater as it is loaded.
  for (let i = 1; i <= subLevel2RepeaterCount; i++) {
    $w(`#repeaterSubSub${i}`).onItemReady(($item, itemData, index) => {
      //Get the repeater button from its ID.
      const repeaterButton = $item(`#buttonSubLevelTwo${i}`)
      //Set the item label.
      repeaterButton.label = itemData.label;
      //Set the item link.
      repeaterButton.link = itemData.url;
    });
  }
});


export function buttonMainMenu_mouseIn(event) {
    //Get the ID of the Submenu 1 button the mouse hovers over.
    const selectedRootId = event.context.itemId;
 //Get all the data of the Submenu 2 related to Submenu 1.
    const repeaterData = menuData.filter(item => item.menu === selectedRootId);
 //Set up the box element corresponding to the selected button in Submenu 2.
    setSubSubMenu(repeaterData); 
 //Show the Submenu 2 box.
    $w('#megaMenuStrip').expand();
}

function setSubSubMenu(repeaterData) {
 //Set the image of the Submenu 1
 //$w('#rangeMenuImage').src = repeaterData.img1;
 for (let i = 1; i <= subLevel2RepeaterCount; i++) {
  //Convert the Submenu 2 string to a Javascript object.
  console.log(repeaterData);
  //console.log('this is the 0 ' + repeaterData)[1];
  console.log('this is the data[0]  ' + repeaterData[0]);
  //console.log('(this is the data)[0]  ' + repeaterData)[0];
  console.log('reapeterData subsubitems  ' + JSON.parse(repeaterData[`subSubItems1`]));
  const dataSubSub = JSON.parse(repeaterData[`subSubItems${i}`]);
  //Set a unique ID for each item.
  console.log('this is the dataSUBSUB ' + dataSubSub);
  dataSubSub.forEach(subSubItem => {
   subSubItem._id = createUniqueId();
  })
  //Set the Submenu 2 data in the repeater.
  $w(`#repeaterSubSub${i}`).data = dataSubSub;
 }
} 

Error is: SyntaxError: Unexpected token u in JSON at position 0 on line: console.log('reapeterData subsubitems ' + JSON.parse(repeaterData[subSubItems1]));

AS well as: SyntaxError: Unexpected token u in JSON at position 0 on line: const dataSubSub = JSON.parse(repeaterData[subSubItems${i}]);

I am trying to log everything to find what happens but I can not seem to solve this. setSubsub fuction tries to set the data on the repeaters by reading the database.

Lastly the repeaterData is working correctly as follows:

Any help would be great. Thank you in advance!