The solution for the picker issue appears loading, how to fix it?

That's my code which was fixed in the previous question, and still the error occurs, the data is not showing just showing loading, how to fix that ?

const Sub_Map = () => { 
    const [hasLoaded, setHasLoaded] = useState(false);
    const [data, setdata] = useState();

useEffect(() => {
    const callApi = async () => {
      await getData();
      setHasLoaded(true);
    };
    callApi();
  }, []);

  const getData = () => {
    fetch('http:// . . . ./aplikasi/restapi.php?op=getJenis')
      .then(response => response.json())
      .then(json => {
        // console.log(json);
        setdata(json);
        // console.log(data);
      });
  };

Maybe there is another correction for the return part?

return (
    <View style={styles.container}>
      <Text style={styles.text}>Pilih Data</Text>
      <View style={styles.picker}>
        {hasLoaded ? (
          <ActivityIndicator />
        ) : (
          <Picker
            selectedValue={data}
            onValueChange={itemValue => setdata(itemValue)}>
            {data &&
              data?.map((item, key) => {
                <Picker.Item
                  label={'${item.bencana}'}
                  value={'${item.ID }'}
                  key={key}
                />;
              })}
          </Picker>
        )}
      </View>
     );
    };

and this is for API , there may be a correction

    function getJenis()
{
    global $conn;
    global $json;
    global $obj;

    $sql = mysqli_query($conn, "SELECT * FROM bencana_detail ORDER BY bencana ASC");

    while ($row = mysqli_fetch_array($sql)) {
        $hasil[] = array(
            'ID' => $row['id_bencana_detail'],
            'bencana' => $row['bencana']
        );
    }
    echo json_encode($hasil);
}