How to hang correctly onClick on details?

Question

React

Good day to all.
In the code (or here) I set the open attribute to false and when I click on details I change it
this.setState({ details: !this.state.details }). The fact is that it works, but when you first click on details, it does not open itself. Through a separate button, everything works.
More details:
If open is set to false and details itself is closed (open="false" by default), then when clicking details is not opened, and the value changes to true. On the second click it expands, the value is false.
If open is set to true and details itself is open (open="true"), then when clicking details is not opened, and the value is changed to false. On the second click it expands, true.

Answer 1

Showing/hiding the details content on click is the default behavior and seems to conflict with your attempts to control the details state. Override the default action on click:

toggleDetails = (e) => {
  e.preventDefault();
  this.setState({ details: !this.state.details });
}

Answer 2

This is how it works

toggleDetails = () => {
    this.setState({
      details: !this.state.details
    });
  };

<details open={this.state.details} onClick={() => this.toggleDetails}>
    <summary>Заголовок</summary>
     Вложение details
</details>