Why doesn't the state of the array change?

Question

React

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

Inside this component is another component, inside which the formation of the mobx array takes place.

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

Store MOBX file

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
    }
}

Console log

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}

In another project, everything worked fine. I can't assign cards to my books.
I already tried to get cards in the nested component and return them to the parents through callback, and then by.