extending of observable subclassing: [MobX] Options can't be provided for already observable objects

When I create a deep structure with few extends I got this kind of error:

Uncaught Error: [MobX] Options can't be provided for already observable objects.

"mobx": "^6.4.2", "mobx-react-lite": "^3.3.0",

All of code is just dirty example. real structure more complex.

Code example:





import { makeObservable, observable, action } from 'mobx';

class DateMobx {
    date ;

    constructor(data) {
        this.date = new Date(data.date);
        makeObservable(this, { date: observable }, { autoBind: true });
    }
}

class Todo extends DateMobx {
    id = 0;
    title = 'title';
    text = 'text';

    constructor(todo) {
        super(todo);
        this.id  = todo.id;
        this.title  = todo.title;
        makeObservable(this, { id: observable,  title: observable, changeTitle: action }, { autoBind: true });
    }

    changeTitle= (e) => {
        const { value } = e.target;
        this.title = value;
    }
}

class TodoList {
    todo = [];

    constructor() {
        const todoData = [{ id: 1, title: 'title', date: '123' }];
        this.todo = todoData.map(item => new Todo(item)); // ERROR happen here

        makeObservable(this, { todo: observable }, { autoBind: true });
    }
}


 
Error happen in constructor of TodoList class.


if remove makeObservable from Todo class, error is not reproduced but I need reactivity in that class.


If remove extends DateMobx from Todo class error also is not reproduces (but I have a lot of general classes with basic logic where I need reactivity too).



 
Why its happen and what should I do if I really need such kind of deep structure ?