Why do I need to wrap my react components with observer when using React's useState or useMemo？

[koloer-blus]

const TimerView = observer(() => {
    const [timer] = useState(() => new Timer()) // See the Timer definition above.
    return <span>Seconds passed: {timer.secondsPassed}</span>
})

In the above code, even without wrapping the component with observer, my TimerView is being updated in response, which is based on how react state updates.
Does the update method change if the observer package is used?
I don't understand why the observer package is needed here, since I'm not updating my component via props or an external model.

[kubk]

If you remove observer the component stops updating (unless parent component is updating, which trigger the update for children). useState is used here only to keep value between component rerenders. The value that holds useState is never updated. Notice that you have const [timer] = useState(...), not const [timer, setState] = useState(...). Only Mobx is involved here to update the component

[koloer-blus]

Thanks a lot, I understand the results so far here.
One more problem, when I use eslint-plugin-mobx, I just pass in the final simple type value (string, number, boolean) in my react component, but it also adds to my component observer, here is how to judge the addition logic?

export const AmountItemCard: React.FC<IAmountLinkCard & PropsWithChildren> = observer(
  function AmountItemCard(props) {
    const { title, link, data, children } = props;

    const CardContent = useMemo(
      () => (
        <React.Fragment>
          <S.AmountInfoCardTitle>{title}</S.AmountInfoCardTitle>
          <S.AmountInfoCardData>
            {_.isNumber(data) ? data.toLocaleString() : '-'}
            {Boolean(link) && (
              <S.AmountJumpIcon className="jump-icon-box">
                <IconRight className="jump-icon" />
              </S.AmountJumpIcon>
            )}
          </S.AmountInfoCardData>
        </React.Fragment>
      ),
      [children, link, data, title],
    );

    return link ? (
      <S.AmountLinkCard to={link} className="active-card">
        {CardContent}
      </S.AmountLinkCard>
    ) : (
      <S.AmountTextCard>{CardContent}</S.AmountTextCard>
    );
  },
);`