Facing issues while using nativebase io framework in NX workspace - Module parse failed

Facing issues while using nativebase io framework in NX workspace - Module parse failed

Issue- Module parse failed: Unexpected token

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

Adding just one single nativebase component in nx workspace react project throwing an Error

Code :

import React from 'react';
import { NativeBaseProvider, Box } from 'native-base';


export function App() {
  return (
    <div className={styles.app}>
      <header className="flex">
        <Logo width="75" height="75" />
        <h1>Welcome to App </h1>
       
        <NativeBaseProvider>
      <Box>Hello world</Box>
        </NativeBaseProvider>
       
      </header>
     
    </div>
  );
}

export default App;

Version stack -

"babel-preset-es2015": "^6.24.1",
"core-js": "^3.6.5",
"expo": "39.0.2",
"expo-status-bar": "1.0.2",
"native-base": "^3.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",

I have also tried installing nativebase framework on workspace level as well as project level however facing the same issue.