I have an array in my firestore collection called features and it hold a set of features. Now i want to extract the values from the array and loop them and display them in a list.

But when i do so they are displayed stuck together like this:

In my firestore it saved as such:

How can i get each value to be seperated and shows the icon beside when i loop through the array and print the values?

here is my code:

    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>
)