How to rotate Fontisto icon in react native

I Import Fontisto import { Fontisto } from "@expo/vector-icons";

Add an Icon <Fontisto style={styles.windDirectionArrow} name='arrow-up' />

and the styling to rotate it

const styles = StyleSheet.create({
    windDirectionArrow: {
        fontSize: 40,
        transform: [{ rotate: "90deg" }],
    },
});

But the transform is not working, does anyone know any other solutions for this?

The view I am rendering looks like this

return (
        <View style={styles.container}>
            {error ? (
                <View style={styles.centeredContainer}>
                    <Text style={styles.text}>Unable to load weather data</Text>
                    <Text style={styles.text}>{error}</Text>
                </View>
            ) : isLoading ? (
                <View style={styles.centeredContainer}>
                    <Text style={styles.text}>Loading Weather Data</Text>
                    <ActivityIndicator
                        style={styles.activityIndicator}
                        size='large'
                        color='rgb(255,179,25)'
                    />
                </View>
            ) : (
                <View style={[styles.centeredContainer]}>
                    <Fontisto style={styles.text} name={icon} />
                    <Text style={styles.text}>{temperature}˚C</Text>
                    <Text style={styles.text}>
                        <Fontisto name='arrow-up' style={styles.windDirectionArrow} />
                        {windSpeed}mph
                    </Text>
                    <Text style={styles.text}>{weatherCondition}</Text>
                </View>
            )}
        </View>
    );

It works if I have the Icon element wrapped in its own but I think that is not a clean solution

<Text style={styles.text}>
    <View>
        <Fontisto name='arrow-up' style={styles.windDirectionArrow} />
    </View>
    {windSpeed}mph
</Text>