Babel-plugin-react-native-web kullanarak bir React Native bileşeninden web için paketlenirken hata oluştu

Bir React Yerel bileşeninden web için paketlemeyi ayarlamak için bu öğreticiyi takip ediyorum.

Öğreticiden webpack yapılandırmasını kullanarak başarıyla paketliyorum, ancak dışa aktarılan Düğmeyi bir React projesine içe aktardığımda ve onu oluşturmaya çalıştığımda, tarayıcıda aşağıdaki hatayı alıyorum:

TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

renderWithHooks
./node_modules/react-dom/cjs/react-dom.development.js:14803

  14800 |   }
  14801 | }
  14802 | 
> 14803 | var children = Component(props, secondArg); // Check if there was a render phase update
        | ^  14804 | 
  14805 | if (workInProgress.expirationTime === renderExpirationTime) {
  14806 |   // Keep rendering in a loop for as long as render phase updates continue to

Aşağıda, web'e paketlediğim React Yerel bileşeni bulunmaktadır:

import React from "react";
import { TouchableOpacity, StyleSheet, Text } from "react-native";

export default function Button({ onPress, imageSource }) {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text>
        A
        </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
  },
  image: {
    width: 28,
    height: 28,
  },
});

Bunlar, React Yerel bileşenini paketlemek için kullandığım paketlerin sürümleridir:

"babel-plugin-react-native-web": "^0.17.5",
"metro-react-native-babel-preset": "^0.66.2",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1",
"babel-loader": "^8.2.3",