functional react components browserify

is there any chance you could help me? i have a problem with usage of browserified code. it does not work with functional react components and i don't know why.

when i browserify (browserify --s MK dist/index.js > dist/bundle.js) the code below:

export default class SimpleInput extends Component {
    constructor(props) {
        super(props);

        this.onChange = this.onChange.bind(this);
    }

    state = {
        value: ''
    };

    onChange(evt) {
        this.setState({
            value: evt.target.value,
        });
    }

    render() {
        return (
            <input onChange={this.onChange} value={this.state.value}/>
        );
    }
}

and try to use it - it works fine. but i want a functional component like this below:

export default function SimpleInput() {
    const [ value, setValue ] = useState('');

    const handleChange = useCallback(evt => {
        setValue(evt.target.value);
    }, []);

    return (
        <input value={value} onChange={handleChange} />
    );
}

and i've got an error when i call it:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "None",
    "baseUrl": "src",
    "declaration": true,
    "outDir": "./dist",
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false,
    "sourceMap": true,
    "noUnusedParameters": true,
    "moduleResolution": "Node",
    "incremental": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/__tests__/*"]
}