component is not defined while opened on web - react-native

Question

I have a component that work fine on android but it shows an error when I try to open it on the web using expo
Uncaught ReferenceError: TextInputMask is not defined
at ./src/components/atoms/TextInputMask.js (TextInputMask.js:6:1)
Here is TextInputMask code that gives an error
import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
import { TextInput, Text } from "react-native-paper";
import { TextInputMask as TextInputMaskDefault } from "react-native-masked-text";
export default TextInputMask = React.forwardRef(
(
{
label,
placeholder,
style,
mode = "outlined",
onChangeValue = () => {},
type = "custom",
options = {},
value,
icon,
disabled,
error,
...props
},
ref
) => {
const [data, setData] = useState();
const [maskValue, setMaskValue] = useState();
useEffect(() => {
if (value === null || value === undefined) {
setMaskValue("");
return;
}
if (value) {
value = String(value);
setMaskValue(value);
}
}, [value]);
useEffect(() => {
let rawValue = data?.getRawValue();
onChangeValue(rawValue, maskValue);
}, [maskValue]);
return (
<View style={style}>
<View style={styles.viewInput}>
<TextInput
style={styles.textInput}
label={label}
placeholder={placeholder}
mode={mode}
autoCapitalize="none"
autoCorrect={false}
autoCompleteType="off"
ref={ref}
disabled={disabled}
value={maskValue}
error={error}
render={(inputProps) => {
return (
<TextInputMaskDefault
{...inputProps}
type={type}
options={options}
onChangeText={(text) => setMaskValue(text)}
ref={(ref) => setData(ref)}
/>
);
}}
{...props}
/>
{icon ? (
<Text style={styles.textInputIcon}>
<TextInput.Icon
name={icon}
onPress={onPress}
size={30}
color={error ? Colors.red800 : null}
disabled={disabled}
/>
</Text>
) : null}
</View>
</View>
);
}
);
Any idea where the error might be? I wonder if there is a difference in creating component for android and web?