React migration to hooks - reactjs

Question

I started a new job and here the client is written in react. The big problem is that everything is very old and uses classes instead of React hooks. One simple example of an issue is the need to use mobx 6 or higher however this will require going over all the classes removing the #observable and changing it to make it observable. I don't even know how to start transitioning to a newer version of React with hooks since there is no way of doing it gradually only all at once. In any case if someone can help me with a suggestion or what can be done I will appreciated very much here is dependencies in my package.json if it's of any help
"dependencies": {
"babel-plugin-react-intl": "~3.0.1",
"babel-plugin-wildcard": "~2.1.2",
"bestzip": "^2.2.0",
"bootstrap": "~4.2.1",
"classnames": "~2.2.6",
"config": "~1.27.0",
"coreui.io": "^1.0.0-alpha.6",
"cross-env": "~5.2.0",
"event-emitter-es6": "~1.1.5",
"font-awesome": "~4.7.0",
"js-file-download": "~0.4.4",
"jsx-control-statements": "~3.2.8",
"lodash": "~4.17.4",
"mobx-react-intl": "~1.4.0",
"moment": "~2.20.1",
"papaparse": "~4.3.7",
"preact-context": "~1.1.2",
"query-string": "~6.1.0",
"react": "16.8.0",
"react-app-polyfill": "~0.2.0",
"react-beautiful-dnd": "^13.1.0",
"react-bootstrap-table": "~4.3.1",
"react-dates": "~20.0.0",
"react-dom": "16.8.0",
"react-fast-compare": "~2.0.4",
"react-fontawesome": "~1.6.1",
"react-google-charts": "~3.0.11",
"react-inlinesvg": "~0.6.2",
"react-interval": "~2.0.2",
"react-intl": "~2.8.0",
"react-json-view": "^1.19.1",
"react-ladda": "~6.0.0",
"react-rangeslider": "~2.2.0",
"react-router-dom": "~4.3.1",
"react-select": "~1.2.1",
"react-smooth-range-input": "~0.2.4",
"react-transition-group": "~1.2.1",
"reactstrap": "~7.1.0",
"shx": "^0.3.3",
"simple-line-icons": "~2.4.1",
"superagent": "~3.8.0",
"superagent-auth-bearer": "~0.0.1",
"svgo": "~1.0.3",
"three2": "npm:three#0.125.2",
"webpack-cli": "~3.2.1"
},
"devDependencies": {
"babel": "~6",
"babel-cli": "~6.24.1",
"babel-eslint": "~10.0.1",
"babel-loader": "~7.1.1",
"babel-plugin-flow-react-proptypes": "~3.3.0",
"babel-plugin-syntax-async-functions": "~6.13.0",
"babel-plugin-transform-decorators-legacy": "~1.3.4",
"babel-polyfill": "~6.23.0",
"babel-preset-env": "~1.6.0",
"babel-preset-es2015": "~6.24.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-1": "~6.24.1",
"babel-preset-stage-2": "~6.24.1",
"babili-webpack-plugin": "~0.1.2",
"cobertura-merge": "*",
"copy-webpack-plugin": "~4.6.0",
"css-hot-loader": "~1.3.0",
"css-loader": "~2.1.0",
"eslint": "~4.4.1",
"eslint-config-wix": "~1.1.16",
"eslint-loader": "~1.9.0",
"extract-text-webpack-plugin": "~4.0.0-beta.0",
"file-loader": "~3.0.1",
"flow-bin": "~0.48.0",
"flow-status-webpack-plugin": "~0.1.7",
"html-webpack-plugin": "~3.2.0",
"install": "~0.10.1",
"jest": "~20.0.4",
"jest-cli": "~20",
"jest-html-reporters": "^1.2.1",
"jest-junit": "*",
"mobx": "~5.9.0",
"mobx-react": "~5.4.3",
"mobx-react-devtools": "~4.2.15",
"node-sass": "~4.14.0",
"nodemon": "~1.11.0",
"npm": "~5.3.0",
"optimize-css-assets-webpack-plugin": "~3.1.1",
"preact": "~10.0.0-alpha.0",
"preact-compat": "~3.18.4",
"react-c3js": "~0.1.20",
"resolve-url": "~0.2.1",
"resolve-url-loader": "~3.0.0",
"sass-loader": "~7.1.0",
"style-loader": "~0.18.2",
"svg-react-loader": "~0.4.6",
"url-loader": "~1.1.2",
"webpack": "~4.29.0",
"webpack-dev-server": "~3.1.14",
"webpack-merge": "~4.1.0"
},