Does the react-hooks not support functions?

[HYEOK999]

Hello I am a student studying React.
Recently, I am studying React Mobx and I want to use React Hooks. It seems to work well in class form, but does it come out strangely in Hooks? Is this right?

I will also leave the sauce below.

// Class Component 
import React, { Component } from 'react';
import { decorate, observable, action } from 'mobx';
import { observer } from 'mobx-react';

class Counter extends Component {
  number = 0;

  increase = () => {
    this.number++;
  };

  decrease = () => {
    this.number--;
  };

  render() {
    return (
      <div>
        <h1>{this.number}</h1>
        <button onClick={this.increase}>+1</button>
        <button onClick={this.decrease}>-1</button>
      </div>
    );
  }
}

decorate(Counter, {
  number: observable,
  increase: action,
  decrease: action,
});

export default observer(Counter);

// React Hooks
import React from 'react';
import { useObserver, useLocalStore } from 'mobx-react';

const Counter2 = (props) => {
  const store = useLocalStore(() => ({
    number: 0,
    increase() {
      store.number++;
    },
    decrease() {
      store.number++;
    },
  }));

  return useObserver(() => (
    <div>
      <h1>{store.number}</h1>
      <button onClick={store.increase}>+1</button>
      <button onClick={store.decrease}>-1</button>
    </div>
  ));
};

export default Counter2;