Rendering a document that is not in the database by the client

help
1

Hi, I have a strange problem.
The documents in my database have a certain number, for example, 5.
And I subscribed to these documents and rendered them from both the server (with Fast Render) and the client.

But sometimes one of these documents is repeated twice ,Although once available in the database

There is no problem in rendering the server side and the information is rendered accordingly. But when the client renders, it repeats one of the documents twice.
As a result, the console gives an error that the server rendering does not match the client rendering.

2

this is Alrtcles Component

import React , { Component } from "react";
import { Link } from "react-router-dom";
import {Helmet} from 'react-helmet-async';
import Article from '../Components/Article/Index.jsx';
import { withTracker } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor';
import {connect} from 'react-redux';
import {Article as ArticleCollection} from '../../../Collections/Article/Article';

class Articles extends Component {
     state = {  }
     render() { 
        const data = this.props.loading ? ArticleCollection.find({}).fetch() : false ;

         return ( 
            <React.Fragment>
                {data
                    ?   data.map((article , index) => <Article key={index} article={article} />)
                    : ''
                }
            </React.Fragment>
          );
     }
 }
 const ArticlesContainer = withTracker(() => {
        const handle = Meteor.subscribe('Pages.Articles');
        const loading = handle.ready();
        return {
            loading,
        };
})(Articles);

const MapStateToProps = state => {
    return {
        HasUser : state.HasUser
    }
}

export default connect(MapStateToProps)(ArticlesContainer);
3

this is Article Component


import React , { Component } from "react";

class Article extends Component {
    
    render() { 
        return ( 
            <div className="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 card-group">
                <div className="card card-lastArticle mb-4 border-0" >
                    <div className="hovereffect">
                        <a href=''>
                            <img  src={ this.props.article.img ? this.props.article.img : '' } alt=""></img>
                        </a>
                    </div>
                    <div className="card-body pb-0">
                        <a href='' className="text-decoration-none">
                            <h5 className="card-title">
                                {this.props.article.title ? this.props.article.title  : ''}
                            </h5>
                        </a>
                       
                    </div>
                </div>
            </div>
         );
    }
}
 
export default Article;