Tengo una matriz en mi colección de firestore llamada características y contiene un conjunto de características. Ahora quiero extraer los valores de la matriz, hacer un bucle y mostrarlos en una lista.

Pero cuando lo hago, se muestran pegados así:

En mi tienda de fuego se guardó como tal:

¿Cómo puedo separar cada valor y mostrar el ícono al lado cuando recorro la matriz e imprimo los valores?

aquí está mi código:

 const [features, setFeatures] = useState([]); const featuresList = [] const getPropertyDetails = async () => { await firebase.firestore().collection("Properties").where("propertyID","==",propID).get().then((snapshot) => { snapshot.forEach((doc) => { const {features} = doc.data(); featuresList.push({ features:features, }) setFeatures(featuresList) }) }) } useEffect(() => { getPropertyDetails() },[]) return ( <div className="property-news-single-card border-bottom-yellow"> <h4>Features</h4> <div className="row"> <div className="col-sm-4"> <ul className="rld-list-style mb-3 mb-sm-0"> {features.map((feature,i) => ( <li><i className="fa fa-check" />{feature.features}</li> )) } </ul> </div> </div> </div> )