eslint Throwing the error: Do not define components during render

I am trying the render the icons in drawer navigation but eslint Throwing the error: Do not define components during render.

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “DrawerLayout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true.eslintreact/no-unstable-nested-components

      <Drawer
        drawerContent={CustomDrawerContent}
        screenOptions={{
          headerStyle: {
            backgroundColor: '#171630',
          },
          headerTintColor: '#fff',
          drawerHideStatusBarOnOpen: true,
          drawerActiveBackgroundColor: '#171630',
          drawerActiveTintColor: '#fff',
          drawerLabelStyle: { marginLeft: -20 },
          headerRight: () => <HeaderRight onLogout={onLogout} />, // at this line I am getting above error by eslint
        }}
      >

I tried to lots for fixing the issue but I got only that I can disable from eslint as rule. But I want to know why it is throwing the error. is it possible do without disable eslint ?

I got to know the answer, I create separate util file and there I redefine the component like this

export const HeaderRight = (action, lib, icon, size, color) => (
  <View style={{ marginLeft: 15, marginRight: 15 }}>
    <TouchableOpacity onPress={action}>{IconComponent(lib, icon, size, color)}</TouchableOpacity>
  </View>
);

and for use this I used as function instead of component

HeaderLeft(action, 'FontAwesome', 'star', 20, 'red');