Mobx out of bounds read x

Question

Im using a dropdown to add items to a Formik FieldArray. The dropdown has items loaded from a Mobx store by a search-functionality. The item is added to the table but with a warning about index out of bound.

BUT if i do a refresh on the page and add items, the warning is no longer present. Only if i from a previous page clicks on the link to this specific page and start adding items, the warning shows up.

The child-component FieldArray looks like this (simplified)

const arrayHelpersRef: any = useRef();

useImperativeHandle(props.itemToAdd, () => ({
    value(item: Item) {
        arrayHelpersRef.current.push(item)
    }
}))

<FieldArray name='items'>
    arrayHelpersRef.current = fieldArrayProps
    const { push, remove, form } = fieldArrayProps
    const { values } = form
    const { items } = values
    return <>
        {items.length > 0 &&
           <Table selectable singleLine>
               <Table.Header />
               <Table.Body>
                   { items.map((item: Item, index: number) => {
                      return (
                          <Table.Row key={item.id}>
                          <Table.Cell><MyTextInput placeholder='Beskrivning' name={`items[${index}].description`} /></Table.Cell> <-- This row gives a warning
                   

The Parent component with the dropdown includes this onChange handler:

const handleOnChange = (e: React.SyntheticEvent<HTMLElement, Event>, data: DropdownProps) => {
    childRef.current.value(items.find(item => item.itemNumber == data.value));
}