How to use the mobx-react-lite.observer function in mobx-react-lite

import * as React from 'react';
import { observer } from 'mobx-react-lite';

import {
  StyledNewsItem,
  Img,
  Info,
  Title,
  Footer,
  Source,
  Fill,
  Description,
} from './style';
import { INewsItem } from '~/interfaces/news-item';

export const NewsItem = observer(
  ({
    item,
    column,
    row,
    width,
    height,
  }: {
    item: INewsItem;
    column: number;
    row: number;
    width: number;
    height: number;
  }) => {
    // eslint-disable-next-line prefer-const
    let [img, setImg] = React.useState('');

const children = record.children;

    if (children && children.length) {
      const key = record.get('key');
      expendedKeys.push(key);
      record.isExpanded = true;
    }

    const parent = record.parent;
    if (parent && !parent.isExpanded) {
      expandParents(parent, expendedKeys);
    }
  }
}

const TreeView = observer(({ ds, store, nodesRender, searchAble }) => {
  const treeClass = useMemo(() => classnames({
    'c7ncd-menu-wrap': true,
    'c7ncd-menu-scroll': searchAble,
  }), [searchAble]);

  const nodeRenderer = useCallback(({ record }) => nodesRender(record, store.getSearchValue),
    [store.getSearchValue]);

  function handleSearch(value) {
    const realValue = value || '';
    const expandedKeys = [];

    // NOTE: 让多个 action 只执行一次
    runInAction(() => {
      /**
       *

<div>
        <span>变更内容</span>
        <div>
          
          <div>
            
          </div>
          
        </div>
      </div>
    
  );
}; 

export default observer(UpdateRemindModalChildren);

)
}

export default observer(LivesList)

}
          <button color="primary">
            {formatMessage({ id: 'network.config.addport' })}
          </button>
        
      
    
  );
}

export default observer(FormContent);

*   You should have received a copy of the GNU Affero General Public License
 *   along with this program.  If not, see .
 */

import * as React from "react";
import { observer } from 'mobx-react-lite';

export interface ASR33Props {
    punchData: string;
    onReaderKey(chr: number): void;
    onReaderClear(): void;
    onTapeLoad(tape: File): void;
    onReaderActivationChange(state: boolean): void;
}

export const ASR33: React.FunctionComponent = observer((props) => {
    const textRef = React.useRef(null);

    scrollToBottomOnChange(textRef);

    return (
        <section>
            <div>
                <h2>Output</h2>
                <div>
                    <textarea value="{props.punchData}" style="{{fontFamily:" cols="{80}" rows="{8}" readonly="">                &lt;/div&gt;

                &lt;div className='control'&gt;
                    &lt;button className='button' onClick={props.onReaderClear}&gt;Clear Output&lt;/button&gt;</textarea></div></div></section>

win.focus();
  }
};

const onMoreClick = (data: IBookmark) => (e: any) => {
  e.stopPropagation();

  const { left, top } = e.currentTarget.getBoundingClientRect();

  store.menuVisible = true;
  store.menuLeft = left;
  store.menuTop = top;
  store.currentBookmark = data;
};

export const Bookmark = observer(({ data }: { data: IBookmark }) => {
  const selected = store.selectedItems.includes(data._id);

  let favicon = data.favicon;
  let customFavicon = false;

  if (data.isFolder) {
    favicon = icons.folder;
    customFavicon = true;
  } else {
    if (favicon) {
      if (favicon.startsWith('data:image')) {
        favicon = data.favicon;
      } else {
        favicon = store.favicons.get(data.favicon);
      }
    } else {

page.path.push(input.value.trim());
    store.pathView.inputVisible = false;
  } else if (e.key === 'Escape') {
    store.pathView.inputVisible = false;
  }
};

const onBlur = () => {
  store.pathView.inputVisible = false;
}

const onContextMenu = () => {
  store.contextMenu.show('path');
}

export const PathView = observer(() => {
  const page = store.pages.current;
  if (!page) return null;

  return (
    
      
        {page.path.items.map((label, index) => (
          {label}
        ))}

const onInput = (item: ITabGroup) => (e: any) => {
  item.name = e.currentTarget.value;
};

const onBlur = (item: ITabGroup) => () => {
  item.editMode = false;
};

const onKeyPress = (item: ITabGroup) => (e: any) => {
  if (e.key === 'Enter') {
    item.editMode = false;
  }
};

export const TabGroup = observer(({ data }: { data: ITabGroup }) => {
  const { name, color, id, editMode } = data;

  return (
    
      {editMode && (