Why using redux cause server - client html content mismach

I am trying to prepare category menu for a shop but get client server content mismach. Could you please explain why this happens?

Warning: Expected server HTML to contain a matching <a> in <div>.

Should i pass data as a props instead of redux?

import styles from "../../styles/components/layout/TopNavigation.module.css"
import Link from "next/link"
import { useSelector, useDispatch } from 'react-redux';
import { Container } from "react-bootstrap"
import store from "../../redux/store";

function TopNavigation() {
    //const categories = store.getState().categories
    const categories= useSelector((state) => state.categories)
    return (
        <Container>
            <div className={styles.menuContainer}>
                <div className={styles.menu}>
                    {categories && categories.map((category, id) => {
                        //console.log(category.attributes.slug)
                        return (

                            <Link key={id} className={styles.menuLink} href={`/category/${category.attributes.slug}`}>{category.attributes.name}</Link>
                        )
                    })}

                </div>
            </div>
        </Container>

    )
}


export default TopNavigation