Почему ругается Mobx а контент не выводиться?

/-----------------"Это store"--------------------------/

import { runInAction, makeAutoObservable } from "mobx";
import { getComics } from "../Api/comics/comics";
import { IComics } from "../types/comics";

class ComicsStore {
    comicsList: IComics[] = [];

    constructor() {
        makeAutoObservable(this);
    }

    setComicsList = () => {
        runInAction(async () => {
            try {
                const {data} = await getComics();
                this.comicsList = data.results
            } catch (error) {
                console.log(error);
            }
        })
    }
};

/----------------------Это Контент------------------------------/

import {observer} from 'mobx-react-lite';
import comicsStore from '../../store/comicsStore';
import react, {useEffect} from 'react'

const Comics:React.FC = () => {
    
    const {comicsList, setComicsList} = comicsStore;

    useEffect(() => {
        setComicsList();
    },[])

    return (
        <div>
            {comicsList.map(({id, images, title}) => (
                <div key={id}>
                    <div>{images}</div>
                    <div>{title}</div>
                </div>
            ))}
        </div>
    )
}

export default observer(Comics);

/-------------------Ошибка------------------------/

derivation.ts:144 [MobX] Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ComicsStore@1.comicsList