How do I use NavHashLink to smooth scroll through my pages? - reactjs

Question

I want to have all my pages on one page that i could scroll through and when i press the button on the navbar, it scrolls to that section.
In my App JS I have the following normal setup
<Switch>
<Router>
<Sidebar />
<Route path='/Home' component={Home} />
<Route path='/Education' component={Education} />
<Route path='/Skills' component={Skills} />
<Route path='/Experience' component={Experience} />
<Route path='/Projects' component={Projects} />
</Switch>
</Router>
I am using as my navigation, inside sidebar we have
import React, { useState } from "react";
import { NavHashLink } from "react-router-hash-link";
const Container = styled.div`
position: fixed;
z-index: 100;
top: 50%;
transform: translateY(-50%);
.active {
border-right: 4px solid var(--white);
border-radius: 0 30px 30px 0;
img {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
brightness(103%) contrast(103%);
}
}
`;
const SlickBar = styled.ul`
color: var(--white);
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--black);
top: 10rem;
left: 0;
width: ${(props) => (props.clicked ? "14rem" : "3.5rem")};
transition: all 0.5s ease;
border-radius: 0 30px 30px 0;
`;
const Item = styled(NavHashLink)`
text-decoration: none;
color: var(--white);
width: 100%;
padding: 1rem 0;
cursor: pointer;
display: flex;
padding-left: 1rem;
&:hover {
border-right: 4px solid var(--white);
border-radius: 0 30px 30px 0;
img {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
brightness(103%) contrast(103%);
}
}
img {
width: 1.2rem;
height: auto;
filter: invert(92%) sepia(4%) saturate(1033%) hue-rotate(169deg)
brightness(78%) contrast(85%);
}
`;
const Text = styled.span`
width: ${(props) => (props.clicked ? "100%" : "0")};
overflow: hidden;
margin-left: ${(props) => (props.clicked ? "1.5rem" : "0")};
transition: all 0.3s ease;
`;
const Sidebar = () => {
const [click, setClick] = useState(false);
return (
<Container>
<SlickBar
onMouseEnter={() => setClick(true)}
onMouseLeave={() => setClick(false)}
clicked={click}>
<Item
onClick={() => setClick(false)}
exact
activeClassName="active"
to="/Home"
>
<img src={Home} alt="Home" />
<Text clicked={click}>DashBoard</Text>
</Item>
<Item
onClick={() => setClick(false)}
activeClassName="active"
to="/Education"
>
<img src={Education} alt="Education" />
<Text clicked={click}>Education</Text>
</Item>
<Item
onClick={() => setClick(false)}
activeClassName="active"
to="/Skills"
>
<img src={Skills} alt="Skills" />
<Text clicked={click}>Skills</Text>
</Item>
<Item
onClick={() => setClick(false)}
activeClassName="active"
to="/Experience"
>
<img src={Experience} alt="Experience" />
<Text clicked={click}>Experience</Text>
</Item>
<Item
onClick={() => setClick(false)}
activeClassName="active"
to="/Projects"
>
<img src={Projects} alt="Projects" />
<Text clicked={click}>Projects</Text>
</Item>
</SlickBar>
</Container>
);
};
After watching many tutorial ands trying different things nothing seemed to work.