React smooth scroll only partially working - reactjs

Question

I am trying to implement a smooth scroll in React, with no jquery. I have downloaded and installed react-scrollable-anchor from npm. The smooth scroll works with the first two items in my menu, and not with the last 2. See my website nav.
<div className="App">
<div>
<div className="header">
<div className="logobox">
<img className="logo" src="/eplogo.png" alt="logo"/>
</div>
<nav className="nav">
<a className="navitem" href="#projects">
<p>Projects</p>
</a>
<a className="navitem" href="#about">
<p>About</p>
</a>
<a className="navitem" href="#resume">
<p>Resume</p>
</a>
<a className="navitem" href="#contact">
<p>Contact</p>
</a>
</nav>
</div>
<header className="heading">
<a className="name" href="/">
<h1 className="App-title">Emily Pancake</h1>
</a>
<h2 className="tagline" >Web Developer and Design Enthusiast</h2>
<div className={this.state.ghost}>
<p className={this.state.typewriter}>{this.state.jokeText}</p>
</div>
<a className="arrowDown" href="#projects" rel="noopener noreferrer"><Button shape="circle" icon="down" /></a>
<ScrollableAnchor id={'projects'}>
<h2 className="sectionTitle notop">Projects</h2>
</ScrollableAnchor>
</header>
<section className="projectList">
<Projects projects={projects} key="2" />
</section>
<ScrollableAnchor id={"about"} name="about"><About key="1"/></ScrollableAnchor>
<ScrollableAnchor id={"resume"} name="resume"><Resume key="2"/></ScrollableAnchor>
<ScrollableAnchor id={"contact"} name="contact"><Footer key="1"/></ScrollableAnchor>
</div>
</div>
How can I get it to work on "resume" and "contact." The only difference is that they are functional react components instead of classes. The error seems to be related: "Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail."