Smoothening the header transition upon scroll in ReactJS static web application

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;