How to make sliding animation in ReactJS

I have developed this login page which has sign-in and sign-up sections in the same page and can be displayed by sliding animation through button clicking process.

When doing that process by JS file this an error message: cannot read

properties of null (reading ‘addeventlistener’)

This is the result I am looking for: https://youtube.com/clip/Ugkx-j0vr45zTq9YzXk5u_5ehYQOUErJqIoX?si=wSkcpjI2u7ze-sPt

function Login() {
  return (
    <div className='login_container' id='container'>
      <div className='form-container sing-up'>
        <form>
          <h1>Create Account</h1>
          <div className='social-icons'>
            <i><Fas.FaGooglePlusG /></i>
            <i><Fas.FaFacebook /></i>
          </div>
          <span>O usa tu email para registrarte</span>
          <input type='text' placeholder='Nombre' />
          <input type='text' placeholder='Email' />
          <input type='text' placeholder='Password' />
          <button>Sign Up</button>
        </form>
      </div>
      <div className='form-container sing-in'>
        <form>
          <h1>Sign In </h1>
          <div className='social-icons'>
            <i><Fas.FaGooglePlusG /></i>
            <i><Fas.FaFacebook /></i>
          </div>
          <span>O usa tu email para registrarte</span>
          <input type='text' placeholder='Nombre' />
          <input type='text' placeholder='Email' />
          <input type='text' placeholder='Password' />
          <button>Sign In</button>
        </form>
      </div>
      <div className='toogle-container'>
        <div className='toogle'>
          <div className='toogle-panel toogle-left'>
            <h1>Welcome Back!</h1>
            <p>Enter your personal details to use all of site features</p>
            <button className='hidden' id='login'>Sign In</button>
          </div>
          <div className='toogle-panel toogle-right'>
            <h1>Hello!</h1>
            <p>Register with your personal email or social media </p>
            <button className='hidden' id='register'>Sign Up</button>
          </div>
        </div>
      </div>
      <script src='script.js'></script>
 </div>
  
  )
}

export default Login

const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');


registerBtn.addEventListener('click', () =>{
    container.classList.add("active");
});

loginBtn.removeEventListener('click', ()=> {
    container.classList.remove("active");
});