Running React-Native Package in web (nextjs)

Question

I am developing a package that I can use in both of my mobile and web project. For that I am using using react-native, nextjs and react-native-web. I dont have full react-native app but using storybook in browser to see changes. Everything were going smoothly until I was developing and testing it in storybook. The react-native-gesture-handler, react-native-svg were working fine with simple config in storybook. But when I install the package in nextjs, it start giving issues.

The react-native part are working with the help of react-native-web. Also for react-native-svg, I install svgs and working fine. Alias config next.config.js worked well for the packages that has their web equivalent packages available. I need to just install them and mention in the alias like bellow.

config.resolve.alias = {
  'react-native$': 'react-native-web',
  'react-native-svg': 'svgs'
}

But, for the packages like react-native-picker-select, react-native-gesture-handler they are giving issues.

./node_modules/react-native-picker-select/node_modules/@react-native-picker/picker/js/Picker.js
Module parse failed: Unexpected token (21:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import PickerMacOS from './PickerMacOS';
| 
> import type {TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
| import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
| import type {Node} from 'react';

They are working without issue with storybook in web. I am struggling to load these packages in nextjs. I believe, I am missing something.

How can I run my package with third party library as dependencies?