Почему не меняется состояние массива?

Question

[700Hp]

const [cards, setCards] = useState([])

Внутри этого компонента находится другой компонент, внутри которого и происходит формирование массива mobx.

useEffect(() => {
        console.log(books._books)
        setCards(books._books)
        console.log(cards)
    }, [books._books])

Файл store MOBX

import {makeAutoObservable} from "mobx"

export default class BookStore {
    constructor() {
        this._books = []
        this._filterBooks = []
        this._totalItems = 0
        this._startIndex = 0
        makeAutoObservable(this)
    }

    setIsBooks(books) {
        this._books = books
    }

    setMoreBooks(books) {
        this._books = this._books.concat(books)
    }

    setTotalItems(totalItems) {
        this._totalItems = totalItems
    }

    setStartIndex(index) {
        this._startIndex = index
    }
}

Консоль лог

App.jsx:21 Proxy {0: Proxy, 1: Proxy, 2: Proxy, 3: Proxy, 4: Proxy, 5: Proxy, 6: Proxy, 7: Proxy, 8: Proxy, 9: Proxy, 10: Proxy, 11: Proxy, 12: Proxy, 13: Proxy, 14: Proxy, 15: Proxy, 16: Proxy, 17: Proxy, 18: Proxy, 19: Proxy, 20: Proxy, 21: Proxy, 22: Proxy, 23: Proxy, 24: Proxy, 25: Proxy, 26: Proxy, 27: Proxy, 28: Proxy, 29: Proxy, Symbol(mobx administration): ObservableArrayAdministration}

Proxy {Symbol(mobx administration): ObservableArrayAdministration}

В другом проекте всё отлично работало. Не могу присвоить cards свои книжки.
Пробовал уже в вложенном компоненте получить карточки и через callback вернуть в родители и то мимо.