Реализация "тупых" компонентов ввода в mobx

Question

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

Например, у меня может быть «тупой» компонент формы, подобный этому:

function MyForm(props){
    return (
        <form>
            <input type="number" value={props.value}/>
        </form>
    );
}

Когда я добавляю «умный» (с учетом состояния) компонент поверх этого, я могу уведомить его о состоянии mobx с помощью observer():

import { observer } from "mobx-react"
import React from "react";

import myStore from "./store";
import MyForm from "./myForm";

const MyApp = observer((props) => {
    const store = React.useContext(myStore);
    return (
        <MyForm value={store.formValue}>
    );
});

Однако мой компонент формы также должен иметь возможность обновлять состояние, так как это вход. Однако, если MyForm будет оставаться "тупым", он не сможет получить доступ к магазину и не сможет присвоить значение своим реквизитам, потому что это не имеет смысла вне mobx. Как тогда я могу создать «тупой» компонент ввода в mobx, который может обновлять состояние магазина?