Trying to display links depending on hover but It doesn't work(react)

I'm trying to display different links when user hovers different buttons (in react.js) but it doesn't work. It gives an error like this: undefined is not an object (evaluating 'datas[hovering].content'). Do you know what causes that? Here's my code:

Data I'm using:

const datas = [     {title: "Home",content: [{name: "Home",to: "/"}, {name: "Abstract",to: "/#abstract"}],link: "/"},     {title: "Project",content: [{name: "The Idea",to: "/Project#idea"}, {name: "Previous Similar Projects",to: "/Project#prev"}, {name: "Our Work",to: "/Project#work"}],link: "/Project"},     {title: "Team",content: [{name: "Members",to: "/Team#members"}, {name: "Sponsors",to: "/Team#sponsors"}],link: "/Team"},     {title: "Description",content: null,link: "/description"},     {title: "Human Practices",content: [{name: "Collabrations",to: "/hp#collab"}, {name: "Integrated HP",to: "/hp#integrated"}],link: "/hp"},     {title: "Judging Form",content: null,link: "/judging"},     {title: "Gallery",content: null,link: "/gallery"}]

My Component:

const SubLink: React.FC<{ name: string, to: string }> = function ({ name, to }) {  return <li><a onClick={() => closeNav()} href={to}>{name}</a></li>}

Initial declarations:

const [hovering, setHovering] = useState(0)const [subs, setSubs] = useState<JSX.Element[]>([])

The useEffect Hook:

useEffect(()=>{  const sublist = []  for (var i=0;i<datas[hovering].content!.length;i++) {    console.log(1)    const data = datas[hovering].content![i]    sublist.push(<SubLink key={i} name={data.name} to={data.to} />)  }  setSubs(sublist)},[hovering])

Where I return the SubLink elements

<div className={styles.list}>  {(() => {    return (subs !== []) ? subs : <Image src="images/igem.png" alt="iGEM" style={{ height: "10rem" }} />  })}</div>```