Why doesn't React handle AddEventListener("click")?

Question

React

We need to handle a click on an element. But the result is always (TypeError: Cannot read property 'addEventListener' of null).
As I understand it, it is processed before the required component is loaded.
Please help me solve this problem.
the code:

import './CSS/footer.css'

export function SignUp(props) {
    return(       
        <div id = "signup" className ="ferSignUp">
             <h3>Sign up <img src="img\icon-signup.png" alt="signup"></img></h3>  
        </div>
    );
}

import React, { useEffect, useRef, useState } from "react";
import {SignUp, Basket} from './FooterElements'
import './CSS/footer.css'


export default class Footer extends React.Component{
        constructor(props){
        super(props);
        this.state = {

        }
    }   
    render(){
        return(
            <div className = "fer">
                <h1>3DStore</h1>
                <div className = "ferElements">
                    <SignUp />
                    <Basket />                   
                </div>             
            </div>,
            <UseEffects/>
        );
    }
}

function UseEffects() {
    const [ons, double] = useState("none");
    const ref = useRef(ons);

    useEffect(()=>{
        const oneElem = document.getElementById("signup");
        const twoElem = document.getElementById("signModall");
        ref.current = ons;

        oneElem.addEventListener("click", ()=> {
            twoElem.style.display = double("block");
        })
    }, [ons]);
    return UseEffects;
}

Answer 1

Hooks are generally not applicable for class components in react. As Anton wrote, here you should make a normal approach using react tools. If you really want to manage the elements of the child through the parent component, you can use ref through React.createRef () in classes and useRef in FC.
I did not understand what does and why UseEffects is used in the code. This is not a react component, this function returns itself. This is neither a high order component nor FC. useEffect should depend on external parameters, which can change. If you need to call it once per component render, then dependencies [], if every time - do not specify a value at all.
Make the props pass the delegate to the parent component's function call and refuse to work directly with the DOM (if there is at least one way to do it using react)
Don't write styles directly, try to make the correct class with the {display: block} attribute, for example .block and add style to the button click method. If the style is in another component, pass change methods through props, or use context, redux, etc.