React createRef current is null

Here I got this little code:

    import '../styles/Navbar.css';
    import * as React from 'react';
    import logo from '../assets/logo.webp';
    
    class Navbar extends React.Component {
        constructor(props) {
            super(props);
            this.ref1 = React.createRef();
            this.ref2 = React.createRef();
        };
    
        navAppear() {
            const navbar = this.ref1.current;
            const appearButton = this.ref2.current;
    
            this.switchDisplay(navbar, 'flex');
            this.switchClassBetween('bi-list', appearButton, 'bi-x');
        }
    
        switchClassBetween(className, element, className2) {
            if (element.classList.contains(className)) {
                element.classList.replace(className, className2);
            } else {
                element.classList.replace(className2, className);
            }
        }
    
        switchDisplay(element, displayType) {
            if (element.style.display === 'none') {
                element.style.display = displayType;
            } else {
                element.style.display = 'none';
            }
        }
    
        render() {
            const elems = [];
            const navHeaders = <div className="Navbar-headers Nav-separator" key="navbar-headers" ref={this.ref1}>
                <img className="Navbar-brand" src={logo} alt="Logo" />
                <a href="/#/" className="Navbar-brand-title">Adam Billard</a>
            </div>;
            elems.push(navHeaders);
            const navItems = <ul className="Navbar-items Nav-separator" key="navbar-items" ref={this.ref2}>
                <li className="Navbar-item"><a href="/#/" className="Navbar-link">Home</a></li>
                <li className="Navbar-item"><a href="/#/about" className="Navbar-link">About</a></li>
                <li className="Navbar-item"><a href="/#/contact" className="Navbar-link">Contact</a></li>
            </ul>;
            elems.push(navItems);
    
            const btn = <button className="Navbar-appear-button" onClick={this.navAppear()}><i className="bi bi-list"></i></button>;
            elems.push(btn);

            return <nav>{elems}</nav>;
        };
    }
    
    export default Navbar;

So this code makes a Navbar that is supposed to be responsive, lemme explain. The navbar is rendered, the Navbar-appear-button is on display:none, but if the screen width is less than 768, then the dislay of the button

    Uncaught TypeError: Cannot read properties of null (reading 'style')
        at Navbar.switchDisplay (Navbar.js:30:1)
        at Navbar.navAppear (Navbar.js:17:1)
        at Navbar.render (Navbar.js:51:1)
        at finishClassComponent (react-dom.development.js:19752:1)
        at updateClassComponent (react-dom.development.js:19698:1)
        at beginWork (react-dom.development.js:21611:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
        at invokeGuardedCallback (react-dom.development.js:4277:1)
        at beginWork$1 (react-dom.development.js:27451:1)

is set to block (inside of the css). And when you click the button, it makes the navbar-items appear so user can use it or click back on the button to make it disappear.

I'm kinda new at React so idk what to do.

And here's the error I'm getting:

And if I log my this.ref1: this.ref1 logging on console

So I don't know how to make the ref's current property equal to an HTMLElement or anything that will help me using style and classList properties.

• Don't call the navAppear function directly during rendering; pass the function to onClick instead.
• You need to bind the this context to the function as well.

onClick={this.navAppear.bind(this)}