Cannot read properties of undefined (reading 'first') - reactjs

Question

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