Page jumps when useState updates - reactjs

Question

I'm trying to build a clone of a MovieDataBase site in react, and when I update my state variable the page jumps ( it jumps up exactly 60px, for whatever reason, and then back down again each time I toggle the switch). I thought it was maybe because I'm interacting with the DOM to get the toggle switch to work, but that doesn't seem to be the issue. I've also been told that happens with styled components, which I don't think I have (still pretty new to REACT, so maybe???). Anyway - I can't figure out why this is happening. I've included the code for the component in question below.
import React, { useState, useEffect } from "react";
import axios from "axios";
import API_KEY from "../../config";
const Popular = ({ imageUri }) => {
// GET POPULAR MOVIES
const [popularMovies, setPopularMovies] = useState("");
const [genre, setGenre] = useState("movie");
const getPopular = async () => {
const response = await axios.get(
`https://api.themoviedb.org/3/discover/${genre}?sort_by=popularity.desc&api_key=${API_KEY}`
);
setPopularMovies(response.data.results);
};
useEffect(() => {
getPopular();
}, [genre]);
const listOptions = document.querySelectorAll(".switch--option");
const background = document.querySelector(".background");
const changeHandler = (el) => {
let getGenre = el.target.dataset.genre;
setGenre(getGenre);
listOptions.forEach((option) => {
option.classList.remove("selected");
});
el = el.target.parentElement.parentElement;
let getStartingLeft = Math.floor(
listOptions[0].getBoundingClientRect().left
);
let getLeft = Math.floor(el.getBoundingClientRect().left);
let getWidth = Math.floor(el.getBoundingClientRect().width);
let leftPos = getLeft - getStartingLeft;
background.setAttribute(
"style",
`left: ${leftPos}px; width: ${getWidth + 1}px`
);
el.classList.add("selected");
};
const isMovieSelected = genre === "movie";
const isTvSelected = genre === "tv";
const movieData = "movie";
const tvData = "tv";
return (
<section className="container movie-list">
<div className="flex flex--align-center">
<MovieHeader>What's Popular</MovieHeader>
<div className="switch flex">
<Toggle
onChange={changeHandler}
selected={isMovieSelected}
data={movieData}
>
In Theaters
<div className="background"></div>
</Toggle>
<Toggle
onChange={changeHandler}
selected={isTvSelected}
data={tvData}
>
On TV
</Toggle>
</div>
</div>
<div className="scroller">
<div className="flex flex--justify-center">
<div className="flex flex--nowrap container u-overScroll">
{popularMovies &&
popularMovies.map((movie) => {
const { title, id, poster_path } = movie;
return (
<MovieItem
title={title}
imageUri={imageUri}
key={id}
poster_path={poster_path}
/>
);
})}
</div>
</div>
</div>
</section>
);
};
export default Popular;
const Toggle = (props) => {
const { children, onChange, selected, data } = props;
const className = selected ? "switch--option selected" : "switch--option";
return (
<div className={className}>
<h3>
<a data-genre={data} onClick={onChange} className="switch--anchor">
{children}
</a>
</h3>
</div>
);
};
const MovieHeader = (props) => {
const { children } = props;
return (
<div className="movie-list__header">
<h3>{children}</h3>
</div>
);
};
const MovieItem = (props) => {
const { title, imageUri, poster_path, id } = props;
return (
<div key={id} className="card">
<div className="image">
<img src={imageUri + "w500" + poster_path} />
</div>
<p>{title}</p>
</div>
);
};