Smoothening the header transition upon scroll in ReactJS static web application - reactjs

Question

I am new to React JS. Anyhow, I able to create the following Web App of my own.
My code works as I needed but with a small issue. The header shrinks and expands in a rugged manner (with a small vibration). The process does not happen smoothly. I suppose you can notice it in the gif image I provided above too. I need to make that transition smooth. How can I modify my code to achieve my aim?
This is the function I use to shrink the header upon scroll the page for 50 pixels down.
const [headerShrinked, setHeaderShrinked] = useState(false);
useEffect(() => {
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop;
const shrinkOn = 50;
if (distanceY > shrinkOn) {
setHeaderShrinked(true);
} else {
setHeaderShrinked(false);
}
}
window.addEventListener("scroll", resizeHeaderOnScroll);
}, []);
And this is the external CSS code linked to it.
.header {
font-size: 55px;
font-weight: 600;
height: 70px;
letter-spacing: 1px;
padding-right: 40px;
padding-top: 0px;
}
.droplinks {
font-family: Arial;
font-size: 20px;
font-weight: 300;
color: black;
position: relative;
text-align: center;
}
.header {
height: 70px;
padding-right: 40px;
padding-top: 0px;
position: relative;
transition: height 0s linear 0.5s;
}
.header.shrinked {
height: 50px;
}
.headerBrand {
font-size: 40px;
font-weight: 600;
letter-spacing: 2px;
transition: font-size 0.5s;
}
.headerBrand.shrinked {
font-size: 30px;
}
.navlinks {
font-family: Arial;
font-size: 20px;
font-weight: 300;
letter-spacing: 2px;
padding-left: 30px;
padding-right: 30px;
position: relative;
text-align: center;
}
.navlinks:hover {
color: #ffffff;
text-shadow: 0px 0px 60px #ffffff;
transition: all 0.2s ease-in;
}
And here is the complete Js code.
import React, { useEffect, useState } from "react";
import { Navbar, Nav, NavDropdown } from "react-bootstrap";
import { Link } from 'react-router-dom';
import styles from "./Header.module.css";
const Header = (props) => {
const [headerShrinked, setHeaderShrinked] = useState(false);
useEffect(() => {
function resizeHeaderOnScroll() {
const distanceY = window.pageYOffset || document.documentElement.scrollTop;
const shrinkOn = 50;
if (distanceY > shrinkOn) {
setHeaderShrinked(true);
} else {
setHeaderShrinked(false);
}
}
window.addEventListener("scroll", resizeHeaderOnScroll);
}, []);
return (
<Navbar sticky="top" collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand className={`${styles.headerBrand} ${headerShrinked ? styles.shrinked : ""}`}>
<Link to="/">
MyWebApp
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavDropdown title="Get to Know Us" id="collasible-nav-dropdown" className={styles.navlinks}>
<div className={styles.dropboard}>
<NavDropdown.Item className={styles.droplinks}>
<Link to="ourstory">
Our Story
</Link>
</NavDropdown.Item>
<NavDropdown.Item className={styles.droplinks}>
<Link to="about">
About Us
</Link>
</NavDropdown.Item>
<NavDropdown.Divider/>
<NavDropdown.Item className={styles.droplinks}>
<Link to="newtrends">
New Trends
</Link>
</NavDropdown.Item>
</div>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link className={styles.navlinks}>
<Link to="/">
Home
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="features">
Features
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="screenshots">
Screenshots
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="pricing">
Pricing
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="faqs">
FAQs
</Link>
</Nav.Link>
<Nav.Link className={styles.navlinks}>
<Link to="blog">
Blog
</Link>
</Nav.Link>
<Nav.Link eventKey={2} className={styles.navlinks}>
<Link to="contact">
Contact
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default Header;