How to set a particular value to drop down when the view is loaded ? about react-native-dropdown-select-list HOT 4 OPEN

import React, {useState} from 'react'
import {Text} from 'react-native'
import {SelectList} from 'react-native-dropdown-select-list'
import {useDispatch} from 'react-redux'

import styles from '../../styles/styles'

const SuperDropdown = props => {
  const {label, entity, keyName, fieldName, updateFunction, theme} = props
  const dispatch = useDispatch()

  const data = [
    {key: 'talent', value: 'Talent', color: '#E00714'},
    {key: 'jobs', value: 'Jobs', color: '#2B8589'},
    {key: 'dating', value: 'Dating', color: '#e1a573'},
    {key: 'accommodation', value: 'Accommodation', color: '#2E87E8'},
    {key: 'travel', value: 'Travel', color: '#54643A'},
    {key: 'flatmates', value: 'Flatmates', color: '#FF6263'},
    {key: 'animalTalent', value: 'Animal talent', color: '#EAC8A8'},
    {key: 'shortStays', value: 'Short stays', color: '#FFA862'},
    {key: 'friendships', value: 'Friendships', color: '#3A3E4D'},
    {key: 'reset', value: '- RESET -'},
  ]

  const getColor = value => {
    const item = data.find(item => item.key === value)
    return item ? item.color : theme.colors.white
  }

  const getValue = key => {
    const obj = data.find(item => item.key === key)
    return obj ? obj.value : null
  }

  const [selectedCat, setSelectedCategory] = useState(entity[fieldName])

  const sendIt = value => {
    dispatch(
      updateFunction({
        [keyName]: entity?.id,
        data: {[fieldName]: value},
      }),
    )
  }

  const [reset, setReset] = useState(0)
  const clearStates = () => {
    setReset(reset + 1)
  }

  return (
    <SelectList
      key={reset}
      search={false}
      maxHeight={1000}
      placeholder={
        <>
          <Text
            style={[
              {
                color: !selectedCat
                  ? theme.colors.background
                  : theme.colors.white,
              },
              styles.h4,
            ]}>
            {!selectedCat ? 'Select a category' : getValue(selectedCat)}
          </Text>
        </>
      }
      arrowicon={
        <Text
          style={{
            top: 8,
            left: 8,
            fontSize: 10,
            color: theme.colors.grey4,
            textTransform: 'uppercase',
          }}>
          category
        </Text>
      }
      boxStyles={{
        borderWidth: 0,
        paddingTop: 6,
        paddingBottom: 6,
        borderColor: theme.colors.grey5,
        backgroundColor: getColor(selectedCat),
        margin: 8,
        marginBottom: 0,
        borderRadius: 20,
      }}
      inputStyles={{
        left: -5,
        color: theme.colors.white,
        ...styles.h4,
      }}
      dropdownTextStyles={{
        color: theme.colors.white,
        ...styles.h4,
      }}
      dropdownStyles={{
        borderColor: theme.colors.grey5,
        borderRadius: 20,
        margin: 8,
      }}
      dropdownItemStyles={{
        paddingHorizontal: 13,
        paddingVertical: 6,
      }}
      setSelected={value => {
        if (value === 'reset') {
          sendIt(null)
          clearStates()
          setSelectedCategory(null)
        } else {
          sendIt(value)
          setSelectedCategory(value)
        }
      }}
      data={data}
      save="key"
    />
  )
}

export default SuperDropdown