TypeError: stateInfo.map is not a function react-native

Please help me with this Error [View Image]

Please help me with this map error I am using react-native.

TypeError: stateInfo.map is not a function react-native

I know there are similar questions, but I can't find out why the error happens. The app crashes (as if was some length problem).

What am I doing wrong?

this is component:

import React, { useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableWithoutFeedback,
  Dimensions,
  Keyboard,
  ActivityIndicator,
} from "react-native";
import { Icon, Input, Button } from "react-native-elements";
import { TouchableOpacity } from "react-native-gesture-handler";
import * as Animatable from "react-native-animatable";
import { auth } from "../firebase";
import "firebase/auth";
import { Picker } from "@react-native-picker/picker";

const Register = ({ navigation }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [subSpinner, setSubSpinner] = useState(false);
  const [stateInfo, setStateInfo] = useState({});
  const [districtInfo, setDistrictInfo] = useState({});
  const [selectedstate, setSelectedState] = useState();
  const [selectedStateCode, setSelectedStateCode] = useState();

  const login = () => {
    navigation.navigate("Login");
  };

  const signIn = () => {
    setSubSpinner(true);
    auth
      .signInWithEmailAndPassword(email, password)
      .then(() => {
        setSubSpinner(false);
      })
      .catch((err) => alert(err));
  };

  useEffect(() => {
    fetch("https://cdn-api.co-vin.in/api/v2/admin/location/states")
      .then((response) => response.json())
      .then((data) => {
        const getstate = data.states.map((state) => ({
          name: state.state_name,
          value: state.state_id,
        }));
        setStateInfo(getstate);
      });
  }, []);
  console.log(stateInfo);

  // useEffect(() => {
  //   fetch(
  //     `https://cdn-api.co-vin.in/api/v2/admin/location/districts/${stateInfo.state_id}`
  //   )
  //     .then((response) => response.json())
  //     .then((data) => {
  //       data.states.map((state) => setDistrictInfo(state));
  //     });
  // }, []);
  // console.log(districtInfo);

  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={styles.container}>
        <View style={{ flex: 1 }}>
          <Image
            style={{ flex: 1, width: null, marginTop: -100 }}
            source={require("../assets/loginBg.jpg")}
          />
        </View>
        <Animatable.Text
          style={styles.titleText}
          animation="fadeInUp"
          delay={100}
        >
          CoBed-India
        </Animatable.Text>
        <View style={styles.container2}>
          <View style={styles.bottomView}>
            <Text style={styles.loginText}>Login</Text>
            <View style={styles.inputView}>
              <Input
                leftIcon={
                  <Icon
                    style={styles.inputIcon}
                    name="person"
                    type="ionicons"
                    color="black"
                    size={24}
                  />
                }
                style={styles.input}
                placeholder="Email"
                value={email}
                texttransform="uppercase"
                onChangeText={setEmail}
                autoCapitalize="none"
                keyboardType="email-address"
                textContentType="emailAddress"
              />
            </View>
            <View style={styles.inputView}>
              <Input
                leftIcon={
                  <Icon
                    style={styles.inputIcon}
                    name="lock"
                    type="ionicons"
                    color="black"
                    size={24}
                  />
                }
                style={styles.input}
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry={true}
                autoCapitalize="none"
                onSubmitEditing={signIn}
              />
            </View>
            <View style={styles.inputView}>
              <Picker
                selectedValue={selectedstate}
                onValueChange={(itemValue, itemIndex) => (
                  setSelectedState(itemValue), setSelectedStateCode(itemIndex)
                )}
              >
                {stateInfo.map((state) => (
                  <Picker.Item
                    label={state.name}
                    value={state.value}
                  ></Picker.Item>
                ))}
              </Picker>
            </View>
            <TouchableOpacity activeOpacity={0.5} style={styles.loginButton}>
              <Button
                raised
                disabled={!email || !password}
                onPress={signIn}
                style={styles.loginButtonText}
                title="Login"
              />
              {subSpinner ? (
                <ActivityIndicator
                  style={{ marginTop: 10 }}
                  invisible
                  size="large"
                  color="#ffab00"
                />
              ) : null}
            </TouchableOpacity>
            <Text style={styles.registerText}>
              Don't have an account?
              <Text onPress={login} style={{ color: "#5352ed" }}>
                {" Login"}
              </Text>
            </Text>
          </View>
        </View>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default Register;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  container2: {
    alignItems: "center",
    justifyContent: "center",
  },
  titleText: {
    position: "absolute",
    top: Dimensions.get("screen").height * 0.1,
    alignSelf: "center",
    color: "#fff",
    fontSize: 60,
    elevation: 20,
  },
  input: {
    height: 40,
    flex: 1,
    fontSize: 16,
    color: "#333",
  },
  loginText: {
    fontSize: 24,
    marginTop: 12,
    marginBottom: 14,
  },
  inputIcon: {
    paddingHorizontal: 8,
  },
  inputView: {
    height: 40,
    marginTop: 10,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
  },
  bottomView: {
    backgroundColor: "#fff",
    opacity: 0.95,
    position: "absolute",
    bottom: 0,
    maxWidth: 700,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingTop: 10,
    paddingBottom: 20,
    paddingHorizontal: 20,
  },

  loginButton: {
    marginTop: 10,
  },
  loginButtonText: {
    width: 400,
    alignSelf: "center",
    fontSize: 18,
  },
  registerText: {
    alignSelf: "center",
    marginTop: 12,
    fontSize: 16,
  },
  fpTextd: {
    marginTop: 10,
    alignSelf: "flex-end",
    fontSize: 16,
    fontWeight: "bold",
    color: "#9d9d9d",
  },
  fpTexte: {
    marginTop: 10,
    alignSelf: "flex-end",
    fontSize: 16,
    fontWeight: "bold",
    color: "#5352ed",
  },
});