When moving back in stack navigator, the image of back button becomes a black reactangle

Question

I have a stack navigator. When I move from one screen to back, then back button image is black rectangle.

<NavigationContainer initialRouteName="Login">
      <Stack.Navigator options= {{}}>
        <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} /> 
        <Stack.Screen name="Welcome" component={WelcomeScreen} options={{ headerShown: false }}
        />
        <Stack.Screen name="Product" component={ProductScreen} options={{
          headerStyle :{
            backgroundColor: '#f78f1e',
            
          },
          headerBackImageSource: require('./assets/icon/back_btn_header.png'), 
         
        }}/>
        <Stack.Screen name="Cart" component={CartScreen} options={{
          headerStyle :{
            backgroundColor: '#f78f1e',
            
          },
          headerBackImageSource: require('./assets/icon/back_btn_header.png'),
        }}/>
      </Stack.Navigator>
    </NavigationContainer>

When I press back button from Cart screen for Product screen, the back button image becomes a black square. But when I move from Welcome screen to Product, it is as actual image. What should I do?

I tried to customize my back button but it is becoming black square.