React Native icons used in react native package not loading when trying to import the component from package i published in npm?

I have created a react native package that I built and published in npm repo. i.e. npm i @smgv/reactnativerc

So I have used react-native-vector-icons. I have installed using link process. when I run the same package folder in local, it works fine but when the same package that is published in npm when I try to install that package and try to use in other react native project as reusable component.

The component gets loaded but the icon used is not showing.

Code used in the package i.e. @smgv/reactnativerc

import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Typography } from '..'
import styles from './Header.style';
import { HeaderProps } from './Header.type';
import Icon from 'react-native-vector-icons/Ionicons';

const Header: React.FC<HeaderProps> = ({
    title,
    onBackClick,
    children
}) => {
    return (
        <>
            <View style={[styles.conatiner]}>
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={onBackClick && onBackClick}
                >
                    <Icon name="arrow-back" size={24} color="#000000" />
                </TouchableOpacity>
                {title && (
                    <View>
                        <Typography
                          title={title || ''}
                          variant="h6"
                        />
                    </View>
                )}
                {children && (
                    <View style={[styles.childContainer]}>
                        {children}
                    </View>
                )}
            </View>
        </>
    );
};

export default Header;

In the project where I have installed and using:

import React from 'react';
import type { Node } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  ScrollView,
} from 'react-native';

import { Header, SearchInput, Checkbox } from '@smgv/reactnativerc';

const App: () => Node = () => {
  return (
    <SafeAreaView >
      <ScrollView>
        <View style={styles.sectionContainer}>
          <Header title="heading" />
          <SearchInput />
          <Checkbox checkBoxList={[
            { key: "a", label: "a", checked: false },
            { key: "b", label: "b", checked: true },
          ]} heading="Checkbox List" />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 10,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Please find attached screen shot for the reference:

So need ur help to resolve this issue.