React Native icon not changing on press.

[ashishspkota14]

Hi there I have issue of changing headerRight icon. Below is my code for headerRight in NavigationOptions.

headerRight:() => 
  <HeaderButtons 
      HeaderButtonComponent = {
          headerButton
      }> 
  <Item
          title = 'Favourite'
          iconName={isFavourite ? 'ios-star' : 'ios-star-outline'}  
          onPress= {toggleFavourite}
          />

           </HeaderButtons>

I have imported Item like this import {HeaderButtons, Item} from 'react-navigation-header-buttons';

iconName={isFavourite ? 'ios-star' : 'ios-star-outline'} this line only executes whatever is in or condition of isFavourite

//and isFavourite looks like below,

const isFavourite =navigationData.navigation.getParam('isFav');

//toggleFavouriteHandler looks like this
const dispatch = useDispatch();

const toggleFavouriteHandler = useCallback(() => {

    dispatch(toggleFavourite(placesId));

You can view 20 sec of video in YouTube here: https://youtu.be/QOZkatNWYs4

Any help would be appreciated.