adding and removing a classList in react js

You are not utilising any of React's functionality.

Read about state management in React and Event Handlers in React

const Header = (props) => {
 const [isContainerActive, setIsContainerActive] = React.useState(false);
  const signUpButton = () => {
     setIsContainerActive(false);
  };  
  const signInButton = () => {
     setIsContainerActive(true);
  };

  return (
    <div className="header">
      <div id="container" className={`container${isContainerActive ? " right-panel-active" : ""}`}>
         <button className="ghost" id="signIn" onClick={signInButton}>Sign In</button>
      </div>
      <div className="overlay-panel overlay-right">
       <p>Enter your personal details and start journey with us</p>
       <button className="ghost" id="signUp" onClick={signUpButton}>Sign Up</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Header />, document.getElementById("root"));

.header {height: 120px;}
.container {float:left;}
.overlay-right {display: none;background: red;float:right;height:100%;}
.right-panel-active ~ .overlay-right {display: inline-block;}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

PS: I also recommend https://www.npmjs.com/package/classnames , or the cx library for className management.

No need to add click event with vanilla js, you could add an React onClick event. You forgot to return the container.

// if you use curly braces you must return the value
 const container = () => {
   return document.getElementById('container');
 };    

// or skip the curly braces
 const container = () => 
    document.getElementById('container');

This is the React way of doing,

You have to keep a local state (useState) and track the button click and based on the state change update the class to the container. You shouldn't directly change the DOM.

Click on the button to see the CSS is adding or not.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [isSignUp, setSignUp] = useState(true);
  return (
    <div id="container" className={isSignUp ? "right-panel-active" : ""}>
      <button onClick={() => setSignUp(false)}>SignIn</button>
      <button onClick={() => setSignUp(true)}>SignUp</button>
      //for testing the change
      {isSignUp ? "right-panel-active added" : "right-panel-active removed"}
    </div>
  );
}

Sample working code - https://codesandbox.io/s/fragrant-http-qo6du?file=/src/App.js

I think the best solution for this is to making a state and handle the style by a ternarian

    function Welcome(props) {
    const {name} = props;
    return (
        <h1 style={name === 'Sara' ? right-panel-active : right-panel-inactive}>Hello, {name}</h1>
    )}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
    </div>
  );
}