I am passing an options object into my SelectableUploadField component. One of the attributes of the items in the options object array is setter, which is a function.

When I try to call the setter function in the component, I get an error in the console saying options.setter is not a function and I'm not sure why.

Parent Component (that passes the props)

export default function ParentComponent() {
    const [documents, setDocuments] = useState({})

    function insertDocument(name, document) {
        setDocuments(prevState => ({
            ...prevState,
            [name]: document
        }))
    }

    return(
        <SelectableUploadField 
            options={[
                {
                    typeId: 'typeId1',
                    shortLabel: 'label1', 
                    title: 'title1', 
                    description: 'description 2', 
                    setter: insertDocument
                },
                {
                    typeId: 'typeId2',
                    shortLabel: 'label2', 
                    title: 'title2', 
                    description: 'description2', 
                    setter: insertDocument
                }
            ]}
            organisation={organisation}
        />
    )
}

Child Component (that throws the error)

function SelectableUploadField({ options }) {
    function handleClick() {
        options[0].setter(options.typeId, { name: 'myDocument', type: 'pdf' })
    }

    return(
        <button onClick={handleClick}>Click me</button>
    )
}

Why am I getting the error when options[index].setter is clearly a function?