Can't trigger an onClick event to toggle a state in react?

I was trying to debug a sidebar for a project I'm making. One of the sidebar buttons don't trigger the onClick event I specified. I was looking 30 minutes into the code, even went as far as to duplicate it and remove any unneccessary elements in order to debug it. My conclusion was:

1. One of the buttons that I already had works properly and the other one I'm trying to fix doesn't even though they share the exact same code.
2. Why is it behaving that way, is beyond me.

Can you find out why?

This is the cursed code:

import React from "react";

class SidebarTest extends React.Component {
    constructor() {
        super();
        this.state = {
            isDropdownActiveFlowers: false
        };
    }

    displayDropdownFlowers = () => {
        this.setState({
            isDropdownActiveFlowers: !this.state.isDropdownActiveFlowers
        });
        
        console.log(this.state.isDropdownActiveFlowers);
    };

    render() {
        return (
            <div className="sidenav">
                <h1 className="Sidebar-Name">Flooo</h1>

                <button onClick={this.displayDropdownFlowers}>works</button>
                <button onClick={this.displayDropdownFlowers}>works</button>
                <button onClick={this.displayDropdownFlowers}>works</button>
                <button onclick={this.displayDropdownFlowers}>doesnt work</button>
                <button onclick={this.displayDropdownFlowers}>doesnt work</button>
            </div>
        );
    }
}

export default SidebarTest;