Problems with react for animation - reactjs

Question

i have the login page without the js animation
after i add the animation code i dont get a render in the login page,
i use this to add the annimation
const signUpButton = document.getElementById('signUp')
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
Here's the code:
import React from 'react';
const Loginpart = () => {
return (
<div>
<section className="position-relative pb-0">
<div className="gen-login-page-background" ></div>
<div className="container" id="container">
<div className="form-container sign-up-container">
<form action="#">
<h1 >Create Account</h1>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div className="form-container sign-in-container">
<form action="#">
<h1 >Sign in</h1>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div className="overlay-container">
<div className="overlay">
<div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button className="ghost" id="signIn">Sign In</button>
</div>
<div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button className="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
</div>
);
};
export default Loginpart;
this is the code for animation :
const signUpButton = document.getElementById('signUp')
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});

Answer 1

Chances are, when you start the handler functions, the Loginpart component still hasn't rendered.
Check the constants if they are undefined.
Perhaps this approach is more suitable for you with react
import React, {useState} from 'react'
const Component=()=>{
const [anime, setAnime] = useState(false)
function handleAnimation(){
setAnime(!anime)
}
<div id='container' className={`container ${anime&&'right-panel-active'}`}>
<button onClick={handleAnimation}></button>
</div>
}
export default Component
There are actually several ways to do this, css-in-js, or even with pure javascript, but you would have to ensure that the component is already assembled.