On-load auto default select a row in the l&l - ERROR Cannot read properties of undefined (reading '0')

I am trying to auto select a row in the list & library based on the optionid at edit form-JS onload action. Unfortunately, browser console gives error (TypeError: Cannot read properties of undefined (reading '0')) at the beginning.

I don't know what's wrong, can someone help to fix?

 fd.spRendered(function() {
     fd.control('SPDataTable3').ready().then(function() {  
 		//Select default checkbox based on optionid
 		var dt = fd.control('SPDataTable3');
 		var optionid = fd.field('optionid').value;
 		var arritems = dt.widget.dataItems();
 		console.log(optionid);
 		console.log(arritems);
 		console.log(arritems.length);
 		/* find index from array prop */
 		const x = arritems.map(i => i.ID).indexOf(optionid);
 		console.log(index);
 
 		/* check & select the row based on the index */
 		$(fd.control('SPDataTable3').$el).find('input[type="checkbox"]')[[x+1]].checked = true;
 		fd.control("SPDataTable3").widget.select().prevObject[[x]].classList.add("k-state-selected");
     });
 });

Dear @AngWR,
The code that you've shared looks correct, but for some reason you use double braces [[]] - this breaks the execution of the code.

Try using single braces instead:

fd.spRendered(function() {
     fd.control('SPDataTable3').ready().then(function() {  
 		//Select default checkbox based on optionid
 		var dt = fd.control('SPDataTable3');
 		var optionid = fd.field('optionid').value;
 		var arritems = dt.widget.dataItems();
 		console.log(optionid);
 		console.log(arritems);
 		console.log(arritems.length);
 		/* find index from array prop */
 		const x = arritems.map(i => i.ID).indexOf(optionid);
 		console.log(index);
 
 		/* check & select the row based on the index */
 		$(fd.control('SPDataTable3').$el).find('input[type="checkbox"]')[x+1].checked = true;
 		fd.control("SPDataTable3").widget.select().prevObject[x].classList.add("k-state-selected");
     });
 });