Классы ES6, вызывающие функцию SetState для себя

Я создаю приложение React и пытаюсь понять, смогу ли я сделать следующее. есть много вложенных компонентов, и тот, который обновляется, всегда является главным родителем.

Идея состоит в том, чтобы построить его через вложенный объект, прототипированный с помощью класса ES6, следующим образом:

class _Board {
    constructor(setStateFunction){
        this.items = [];
        this.setState = setStateFunction;
    }

    addSwimlane() {
        console.log(this);
        this.items = [...this.items, new _Swimlane()];
        this.setState(this);
    }
}

class _Swimlane {
    constructor(){
        this.id = uuidv4();
        this.items = [];
    }

    addColumn() {
        this.items = [...this.items, new _Column(this.id)];
        //Can we call the parent function through super to update the render?
    }
}

Затем у меня есть компонент, в котором я бы вызвал функцию:

const Main = (props) => {
    const [board, setBoard] = useState(new _Board());
    
    useEffect(() => { //Initial Render load setState
        setBoard(new _Board(setBoard));
    }, []);

    return (
        <div className="App" >
            {JSON.stringify(board)}
            <button onClick={() => board.addSwimlane()} >Add Swimlane</button>
        </div>
    );
};

У меня два вопроса:

1. Как вы передаете такую ​​​​функцию в класс? Я могу передать их через функцию стрелки, как обычно, но при передаче в качестве параметра рендеринг не обновляется.
2. Как вы вызываете родительский класс после того, как дочерние элементы были вложены? Должен ли я передать функцию через функцию addX, которая у меня уже есть, и она будет там в качестве ссылки?