Creé mi menú Responsive Hamburger en React. Funciona bien en el escritorio, sin embargo, la hamburguesa no se cae cuando se hace clic, muestra este error cuando se hace clic en ::

 TypeError: Cannot read properties of null (reading 'classList') hamClick src/hamburger.js:24 21 | 22 | const hamClick = (e) => { 23 | e.preventDefault(); > 24 | if(header.classList.contains('open')){//close hamburger | ^ 25 | body.classList.remove('noscroll'); 26 | header.classList.remove('open'); 27 | fadeElems.forEach(function(element){

ESTE es mi código para la función Hamburger;;

 import React from 'react'; import "./scss/animations.scss"; import './scss/header.scss'; import './scss/mixins.scss'; const Hamburger = () => { const btnHamburger = document.querySelector('#btnnHamburger'); const body = document.querySelector('body'); const header = document.querySelector('.header'); const overlay = document.querySelector('.overlay'); const fadeElems = document.querySelectorAll('.has-fade'); const hamClick = (e) => { e.preventDefault(); if(header.classList.contains('open')){//close hamburger body.classList.remove('noscroll'); header.classList.remove('open'); fadeElems.forEach(function(element){ element.classList.remove('fade-in'); element.classList.add('fade-out'); }); } else{//open hamburger body.classList.add('noscroll'); header.classList.add('open'); fadeElems.forEach(function(element){ element.classList.add('fade-in'); element.classList.remove('fade-out'); }); } } return( <a id="btnnHamburger" className="header__toggle hide-for-desktop" href="#" onClick={hamClick}> <span></span> <span></span> <span></span> </a> ) } export default Hamburger;

Por favor, ¿pueden ayudarme a entender lo que debo hacer correctamente?