Randomizing value in a drop down picker in react native expo - react-native

Question

I am trying to randomize the value from my drop down picker and at the same time, to pass on to the next screen but I am having trouble on randomizing the value.
Drop Down Picker
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{label: 'Fast Food', value: 'Fast Food'},
{label: 'Western', value: 'Western'},
{label:'Beverage', value:'Berverage'},
{label:'Chinese', value:'Chinese'},
{label: 'Korean', value: 'Korean'},
{label: 'Taiwanese', value: 'Taiwanese'},
{label: 'Malay', value: 'Malay'},
{label: 'Indonesian', value: 'Indonesian'},
{label: 'Indian', value: 'Indian'},
{label: 'Vietnamese', value: 'Vietnamese'},
{label: 'Japanese', value: 'Japanese'},
{label: 'Italian', value: 'Italian'},
{label: 'Desserts', value: 'Desserts'},
{label: 'Others', value: 'Others'},
]);
Function
const setRandomValue = () => {
const randomIndex = Math.floor(Math.random() * items.length);
setValue([items[randomIndex].label.toLowerCase()]);
console.log(randomIndex)
}
Button
<TouchableOpacity
onPress={setRandomValue}
style = {styles.button}
>
<Text style = {styles.buttonText}>Random</Text>
</TouchableOpacity>
The error I get is "Cannot find Variable:setRandomValue'' Is there something I need to download?
HomeScreen code (Without the styling)
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { auth } from '../firebase'
import { useNavigation } from '#react-navigation/core'
import { signOut } from 'firebase/auth'
import DropDownPicker from 'react-native-dropdown-picker'
import { useEffect, useState } from 'react'
const HomeScreen = () => {
const navigation = useNavigation()
const [open, setOpen] = useState(false);
const [value, setValue] = useState(null);
const [items, setItems] = useState([
{label: 'Fast Food', value: 'Fast Food'},
{label: 'Western', value: 'Western'},
{label:'Beverage', value:'Berverage'},
{label:'Chinese', value:'Chinese'},
{label: 'Korean', value: 'Korean'},
{label: 'Taiwanese', value: 'Taiwanese'},
{label: 'Malay', value: 'Malay'},
{label: 'Indonesian', value: 'Indonesian'},
{label: 'Indian', value: 'Indian'},
{label: 'Vietnamese', value: 'Vietnamese'},
{label: 'Japanese', value: 'Japanese'},
{label: 'Italian', value: 'Italian'},
{label: 'Desserts', value: 'Desserts'},
{label: 'Others', value: 'Others'},
]);
const handleSignOut = async () =>{
try{
await signOut(auth)
console.log("Signed out successfully")
navigation.replace("Login")
}catch (error) {
console.log({error});
}
const setRandomValue = () => {
const randomIndex = Math.floor(Math.random() * items.length);
setValue([items[randomIndex].label.toLowerCase()]);
console.log(randomIndex)
}
}
return (
<View style = {styles.container}>
<Text>Welcome {auth.currentUser?.email}</Text>
<Text></Text>
<Text>What cusine would you like to eat today?</Text>
<DropDownPicker
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<TouchableOpacity
onPress={() => navigation.navigate("SubScreen1", {paramKey:value})}
style = {styles.button}
>
<Text style = {styles.buttonText}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
// onPress={setRandomValue}
style = {styles.button}
>
<Text style = {styles.buttonText}>Random</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={handleSignOut}
style = {styles.button}
>
<Text style = {styles.buttonText}>Sign Out</Text>
</TouchableOpacity>
</View>
)
}
export default HomeScreen
It has been pointed out to me that I am console logging the index in this case as my console log is for the randomIndex. So I wanted to see if I can get the value that I have defined by throwing it to a variable and console logging that. But the result I get was undefined. How do I solve this?
Edited Function
const setRandomValue = () => {
const randomIndex = Math.floor(Math.random() * items.length);
const randomValue = setValue([items[randomIndex].label.toLowerCase()]);
console.log(randomIndex)
console.log(randomValue)
}