Cannot read properties of undefined (reading 'first')

I am trying to add data to a dynamic form in antd. I get the data from firebase and use useEffect to get it. When I try to run my code I get the error TypeError: Cannot read properties of undefined (reading 'first') This error happened while generating the page. Any console logs will be displayed in the terminal

Here is what I have

  const availablelinks = {

    links: [
      alllinks
    ]
  };



      <Form.List name="links" initialValue={
        availablelinks.links.map((item) => {
          console.log(item[0])
          const lol = item[0]['first']
          const zol = 'zol'
          return {
            first: lol,
            last: zol,
          };  
        
    
      }, [])


      }>

here is the rest of my code https://wtools.io/paste-code/bEEc . I think that the error has something to do with the useEffect (because when I edit the code and next.js updates the code in the browser there is nothing happening but when I refresh I get the error) For reference here is how the form looks :

Now i am using

const [theArray, setTheArray] = useState([]);
... (see full code)
      <Form.List name="links" initialValue={
        theArray.map((item) => {
          console.log(item)
          const lol = item.first
          const zol = item.last
          return {
            first: lol,
            last: zol,
          };  
        
    
      }, [])


      }>

and I get https://imgur.com/a/WZIzNMo (it kinda works) it get the state when it is changes but the form does not update