Изменение отображаемых компонентов в зависимости от состояния

Я делаю очень простой веб-сайт, на котором у меня есть изображение, пара элементов h1/2 и две кнопки.

Моя цель состоит в том, что когда я нажимаю кнопку входа в систему, кнопки исчезают и появляется окно, содержащее форму входа.

То же самое для кнопки регистрации, но с полем регистрации.

Я отображаю кнопки или одно из двух полей в зависимости от состояния, но пока мой код не работает.

Всякий раз, когда я нажимаю кнопку, ничего не происходит, она должна перерисовываться, если я не ошибаюсь, но этого не происходит.

import React, { Component } from 'react';
import logo from '../logo.png';
import './css/AddGame.scss';
import AddGameButton from './AddGameButton';

class AddGame extends Component {
  constructor () {
    super();
    this.state = {
      pageState: "buttons",
    }
  }

  openLogin() {
    this.setState({
      pageState: "login",
    });
  }

  openRegister() {
    this.setState({
      pageState: "register",
    });
  }

  render() {
    return (
      <div className = "AddGame">
        <img src = {logo} />
        <h1><span>OPlist</span> estará disponible próximamente.</h1>
        <h2>¿Quieres contribuir añadiendo juegos?</h2>
        {(this.state.pageState == "buttons") ? <div>
          <AddGameButton onclick = {this.openLogin} text = "Entrar" buttonType = "Login" /> <AddGameButton onclick = {this.openRegister} text = "Regístrate" buttonType = "Register" />
        </div> : null}
        {(this.state.pageState == "login") ? <div>LOGIN</div> : null}
        {(this.state.pageState == "register") ? <div>register</div> : null}

      </div>
    );
  }
}

export default AddGame;