How to change button icons of a Flatlist when changing component state

I am trying to change a button icon rendered by Flatlist when the state changes and then in the sequence store that data. I created a boolean property to represent the name of the icons to change when true / false changes, but the icons are not recognized. Can anyone help me?

import { View, Text, FlatList, StyleSheet,ScrollView, Alert } from 'react-native'
import { Button, Title, Badge } from 'react-native-paper';
import AsyncStorage from '@react-native-community/async-storage'


const AllRecipes = () => {

    const [recipes, setRecipes] = useState([])
    const [count, setCount] = useState(0)
    const [iconSave, setIconSave] = useState('')


    function favRecipe(id){
        const favorites = recipes.map( recipe => {
            return recipe.id === id? {...recipe, marked:!recipe.marked} : recipe
        })
        const favIcons = recipes.map( icon => {
            return icon.id === id? 'star' : 'book'
        })
        setIconSave(favIcons)
        setRecipes(favorites)
    }


    useEffect(()=>{
        const favoritedTotal = recipes.filter(recipe => recipe.marked)
        setCount(favoritedTotal.length)
    }, [recipes])



    useEffect(() => {

        const dataRecipes = [
            {id: 1, recipe: 'Fricassê', icon: true},
            {id: 2, recipe: 'Frango assado', icon: true},
            {id: 3, recipe: 'Feijoada', icon: true},
            {id: 4, recipe: 'Feijão tropeiro', icon: true},
            {id: 5, recipe: 'Bolo de chocolate', icon: true},
            {id: 6, recipe: 'Cookies', icon: true},
            {id: 7, recipe: 'Sorvete caseiro', icon: true},
            {id: 8, recipe: 'Torta tradicional', icon: true},
            {id: 9, recipe: 'Sanduíche', icon: true},
            {id: 10, recipe: 'Torta de frango', icon: true},
            {id: 11, recipe: 'Pão de queijo', icon: true},
            {id: 12, recipe: 'Pastel português', icon: true}
        ]
        setRecipes(dataRecipes)

    }, [])

    const storeData = async () => {
        try{
            await 
            AsyncStorage.setItem('@store_icons', JSON.stringify(iconSave)),
            AsyncStorage.setItem('@store_count', JSON.stringify(count)),
            AsyncStorage.setItem('@store_recipes', JSON.stringify(recipes)).then(Alert.alert('Alerta', 'Receitas salvas com sucesso.'))
        }catch(e){
            Alert.alert('Algo deu errado, tente novamente.')
        }
    }

    useEffect(()=>{
        AsyncStorage.getItem('@store_count').then(value => setCount(value))
    }, [])

    useEffect(()=> {
        AsyncStorage.getItem('@store_icons').then(value => setIconSave(value))
    }, [])


    return (
        <ScrollView style={{padding:10, marginBottom: 10}}>
        <Badge>{count}</Badge>
            <Title style={{padding: 10}}>Receitas favoritas:</Title>
            <FlatList
            extraData={iconSave}
            data={recipes}
            renderItem={({item}) => (
                <View style={styles.containerList}>
                <Button icon={iconSave} mode='outlined' onPress={() => favRecipe(item.id)}>{item.recipe}</Button>
                </View>
            )}
            keyExtractor={(item, index) => index.toString()}
            />
            <View style={{flex: 1, padding: 10, justifyContent: 'center'}}>
            <Button mode='contained' onPress={storeData} style={{marginBottom: 20, margin: 5}}>Salvar informações</Button>
            </View>
        </ScrollView>
    )
}

export default AllRecipes

const styles = StyleSheet.create({
    containerList:{
        flex:1,
        flexDirection: 'row',
        padding: 10
    }
})```