[Bare][Web] Cannot run react native web

Expo SDK
#1

Please provide the following:

  1. SDK Version: 44.0.4
  2. Platforms(Android/iOS/web/all): Web
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

I already have an expo bare workflow react native project running on IOS and Android fine. I am now trying to bootstrap the code to be able to run on web through react-native-web.

However, I am encountered with tons of errors like below when I try to run it (expo start:web):

./node_modules/react-native/Libraries/Pressability/HoverState.js:17:4
"export 'default' (imported as 'Platform') was not found in '../Utilities/Platform'
  15 | let isEnabled = false;
  16 |
> 17 | if (Platform.OS === 'web') {
     |    ^
  18 |   const canUseDOM = Boolean(
  19 |     typeof window !== 'undefined' &&
  20 |       window.document &&

./node_modules/react-native/Libraries/Components/Picker/RCTPickerNativeComponent.js:64:11
"export 'default' (imported as 'RCTPickerViewConfig') was not found in './RCTPickerViewConfig'
  62 | if (global.RN$Bridgeless) {
  63 |   ReactNativeViewConfigRegistry.register('RCTPicker', () => {
> 64 |     return RCTPickerViewConfig;
     |           ^
  65 |   });
  66 |   RCTPickerNativeComponent = 'RCTPicker';
  67 | } else {

./node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js:719:7
"export 'default' (imported as 'ScrollResponder') was not found in '../ScrollResponder'
  717 |   state: State = {
  718 |     layoutHeight: null,
> 719 |     ...ScrollResponder.Mixin.scrollResponderMixinGetInitialState(),
      |       ^
  720 |   };
  721 |
  722 |   UNSAFE_componentWillMount() {

Here are my config files
webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  config.resolve = {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.ios.js'],
  };

  return config;
};

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin']
  };
};

index.js

import { registerRootComponent } from 'expo';

import App from './App';

registerRootComponent(App);

app.json

    "web": {
      "build": {
        "babel": {
          "include": ["@invertase/react-native-apple-authentication"]
        }
      }
    }

Any help would be greatly appreciated! Thank you!