How can I change the numColumns of Flatlist when changing the orientation

I created the function name getOrientation() and put it at useEffect so that whenever I rotate the device, it will rerender the component and show me which orientation the device is.

I also created the variable to determine the orientation by using hook

getOrientation()

const [orientation, setOrientation] = useState("")

const window = useWindowDimensions()
const getOrientation = () => {
    if (window.height < window.width) {
        setOrientation("LANDSCAPE")
    } else {
        setOrientation("PORTRAIT")
    }
    return orientation
}

at useEffect

useEffect(() => {
    getOrientation()
})
console.log(orientation)

My problem is that I want to set the numsColumns = 2 in Flatlist (LANDSCAPE) and equals to 1 for the portrait mode but the error popup telling me that I cannot change the numColumns on the fly. What should I do ?

Here is my flatlist

<View style={styles.container}>
        <FlatList
            contentContainerStyle={{
                paddingLeft: insets.left,
                paddingRight: insets.right,
            }}
            data={dishes.dishes}
            numColumns={orientation == "LANDSCAPE" ? 2 : 1}
            renderItem={({ item, index }) => (
             
                <Tile
                    style={styles.tileItem}
                    key={index}
                    title={item.name}
                    caption={item.description}
                    onPress={() => navigation.navigate('Dishdetail_Screen', { dishId: item.id })} // passing infor from one to another screen
                    // chevron={false}
                    featured
                    imageSrc={{
                        uri: baseUrl + item.image
                    }}
                />
             

            )}
            keyExtractor={item => item.id.toString()} />
    </View>

This creepy error enter image description here

P/s: I'm the fresh React-Native developer. Thanks everyone who is checking my problems