Issue with safeareaview when using react-native component in react app

Question

I've tried to render a react-native component in my CRA app. But the following error occurs:

Uncaught Error: No safe area value available. Make sure you are rendering at the top of your app. at useSafeAreaInsets (SafeAreaContext.tsx:121:1) at SafeAreaView (SafeAreaView.web.tsx:28:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1)

I've tried to import react-native-safe-area-context and use the safeareacontect at my app root (app.tsx)

return (
    <SafeAreaProvider
        initialMetrics={{
            insets: { top: 0, right: 0, bottom: 0, left: 0 },
            frame: { x: 0, y: 0, width: 100, height: 100 },
        }}
    >
        <View style={{ width, height }}>
            <GiftedChat {...{ messages, onSend, user, inverted }} />
        </View>
    </SafeAreaProvider>
  );

I am using cra with craco to overwrite the config. following is my craco config file:

const path = require('path');

module.exports = {
    webpack: {
      configure: {
      ignoreWarnings: [
        function ignoreSourcemapsloaderWarnings(warning) {
          return (
            warning.module &&
            warning.module.resource.includes('node_modules') &&
            warning.details &&
            warning.details.includes('source-map-loader')
          );
        },
      ],
    },
    alias: {
      '@': path.resolve(__dirname, 'src'),     
    },
  },
  babel: {
    presets: [
     '@babel/preset-react'
    ],

    plugins: [
    ],
    loaderOptions: (babelLoaderOptions, { env, paths }) => {
      console.log('BABEL');
      console.log(babelLoaderOptions);
      return babelLoaderOptions;
    },
  },
  rules: [   
    {
      test: /\.jsx?$/,
      exclude: /node_modules(\/|\\)(?!(@feathersjs|debug))/,
      loader: 'babel-loader',
    },
  ],
};

However this doesn't solve the issue. May I know how can I solve the safearea value issue ? Or is there a proper way to use rn components in my react app. I am trying to use the rn component react-native-gifted-chat