Understanding the ReactJS quiz from Solo Learn - reactjs

Question

Hello so I am trying to practice React form solo learn so I have a quiz that they gave that I do not understand however through guessing I got the answer(i.e "OFF") however I would love to now understand why this answer is the correct answer.
Question:
What will be the value on the button after it is clicked 5 times?
Code below:
function Toggle() {
const [val, setVal] = useState("ON");
function toggle() {
setVal((val == "ON")? "OF":"ON");
}
return <button onClick={toggle}> {val} </button>;
}

Answer 1

As you may know, this is a functional component which displays a button. On clicking the button, the function toggle() is called. This function changes the value of the button from ON to OFF, and vice versa.
The button starts with "ON" and changes to "OFF every time you click on it.
Therefore, after clicking on it 5 times, the result is "OFF".

Answer 2

Look this example which show previous state of the val state. After you click five times the button will be disabled.
I'm not using functional component as stackoverflow doesn't support it.
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {
val: "ON",
history: []
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
val : (this.state.val == "ON")? "OF":"ON",
history: [...this.state.history, this.state.val]
});
this.s
}
render() {
return <div>
<h3>previous state</h3>
<ul>
{this.state.history.map((h, i) => {
return <li key={i}>{i + 1} val = {h}</li>
})}
</ul>
<button onClick={this.toggle}
disabled={this.state.history.length === 5}>
{this.state.val}
</button>
</div>;
}
}
ReactDOM.render(<Toggle />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>