Unable to assign id to data fetched from firebase real-time database

See more:

ReactJS

Redux

I'm trying to make social media app using react, redux and firebase. I have been stuck at this for a while. I'm using redux to maintain the data in my react app and using firebase database to store it. I'm unable to assign the name property of firebase as an id to their respective item. I get this error message - Warning: Each child in a list should have a unique "key" prop.

What I have tried:

This is how I'm assigning the id's. This is the action that fetches data from firebase.

export const FetchPost = () => {
    return dispatch => {
        dispatch(FetchPostStart());
        axios.get('/Data.json')
        .then(response => {
            const fetchedData = [];
           for(let key in response.data){
                   fetchedData.push({
                   ...response.data[key],
                   id: response.data[key].name
               });
           }
           dispatch(FetchPostSuccess(fetchedData));
        })
    
        .catch(error => {
            dispatch(FetchPostError(error));
        });
    }
}

This is when a new post is added to the firebase

export const NewPost = (postData) => {
         
          return (dispatch) => {
           axios.post('/Data.json', postData)
           .then(response => {
               dispatch(NewPostSuccess(response.data.name, postData));
           })
           .catch(error => {
               dispatch(NewPostError(error));
           })
          }
  }

This is the reducer for the above action

case actionTypes.New_Post_Success: 
        const {Comment, ImageUrl, Date, User} = action.payload.data;
        const id = action.payload.index;
        console.log(id+"Reducer function")
        return {
         ...state,
         loading: false,
         Data: [
           ...state.Data, 
           {Comment, ImageUrl, Date, User},
           id
          ],
        }

This is how I render the data from redux store to the screen.

{this.props.data.reverse().map((res) => (
       <div>
                  <Card
                  key={res.id}
                  className="Cards"
                  >

I used console.log to check the id assigned and it was null for all items.