document.querySelector null error in Safari [closed]

My component layout:

/components/navigation/footer.js
/components/A/index.js

Within index.js I have:

const bottomnavtarget = document.querySelector(".MuiBottomNavigation-root");

and then on form change:

onChange={()=>(bottomnavtarget.classList.add('cf'))}

So when the form changes, I am trying to add a class to MuiBottomNavigation-root (which is within footer.js)

This works OK on Chrome, but in Safari I get the error:

TypeError: null is not an object (evaluating 'bottomnavtarget.classList')

How can I access this class for when the form changes?