I try to rewrite react doc code as class components in a react-create-app but if doesn't behave properly

Hello i'm currently trying to learn React and i'm rewriting all the code samples from the doc in a local react-create-app. I'm having troubles with this part of the Doc, codepen here:

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  
  
  render() {
    const isLoggedIn = this.state.isLoggedIn
    let button

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
        {button}
      </div>
    );
  }
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  )
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  )
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

in this code i'm simply supposed displaying a button showing 'Login' if this.state.isLoggedIn === true and 'Logout' if false. This code works perfectly, it's the one from the Doc.

MY PROBLEM: But when i run my code (as follow) on my computer, the button works only one time and then nothing else append no change of the state, no lifecycle function called. at this point I'm not able to see what's wrong.

Here is my code:

import React from 'react'

export default class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false}
    this.handleLoginClick = this.handleLoginClick.bind(this)
    this.handleLogoutClick = this.handleLogoutClick.bind(this)
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true})
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false})
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn
    let button

    if (isLoggedIn) {
      button = <LogoutButton onClik={this.handleLogoutClick}/>
    } else {
      button = <LoginButton onClick={this.handleLoginClick}/>
    }
    return (
      <div>
        {button}
      </div>
    )
  }
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Connect
    </button>
  )
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Disconnect
    </button>
  )
}

and it's diplayed in App.js like this:

import React from "react";
import LoginControl from "./components/LoginControl";

export default class App extends React.Component {

  render() {
    return (
      <div className={"container"}>
        <LoginControl/>
      </div>
    )
  }
}

And index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

What I'm I doing wrong ? Thank you.