How can i use the same design with different data different pages in reactjs

I have a component called home pages where navbar i using i like use this same navber with my another component called shop.js with different data

This is the home component

const Home = () => {
    return (
        <React.Fragment>
            <Header/>
        </React.Fragment>
    );
};

This is the header component

const Header = () => {
    return (
        <header>
            <TopModal/>
            <Navbar/>
            <HeroSlider/>
        </header>
    );
};

This is the Shop.js components

export default function Shop() {
    return (
        <React.Fragment>
            {/*this component coming from home component*/}
            <Header/>
        </React.Fragment>
    )
}

I want to change the navbar value in shop.js?