I want to display array values using map in jsx, but don't want to create element for undefined value. here in below example, mainArray has multiple subarrays, and in last array, last element is undefined. and unnecessary list is getting created for undefined value.

import "./styles.css";

export default function App() {
const d=['link1','link2','link3','link4','link5'];
const mainArr=[];
  var a=[];
  var b=[];
  var c=[];
  for(var i=0;i<d.length;i=i+3){
    a.push(d[i]);
    b.push(d[i+1]);
    c.push(d[i+2]);
   }
  mainArr.push(a,b,c);
   
  
  return (
    <div>
      {
      mainArr.map((link,ind) => {
       return (
          <div>
            <ul>
            {/* <div>{ind}</div> */}
            {
              link.map(item=> {
                return(
                  <li>{item}</li>
                )
              })
            }
            </ul>
          </div>
        )
      })
    }
  </div>
  );
  }