this.state is not a function

need a helping hand, a stuck in a simple conditional rendering in reactJS the code is: I am changing the login and logout button based on the conditions. for eg. if the user is logged in, the button should be Logout and if the user is logged in then the button should be Login.

I am using react states for this functionality but somehow it's working for login but when I press logout it shows me an error: this.state is not a function

Hey if anyone can solve this please help me with this

this is my main file:

import React, { Component } from "react";

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

  // handler function for logout
  handleLoginClick() {
    this.setState({
      isLoggedIn: true,
    });
  }

  // handler function for logout
  handleLogoutClick() {
    this.state({
      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 className="App">{button}</div>;
  }
}

// for login
function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}
// for logout
function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

this is the file where I am rendering the above file

import React from "react";
import ReactDOM from "react-dom";

// import the components
import Rendering from "./compnents/Rendering";

// render
ReactDOM.render(
  <React.StrictMode>
    <Rendering />
  </React.StrictMode>,
  document.getElementById("root")
);

The error that I am getting is: https://i.stack.imgur.com/9wPlE.png