Javascript – why useState doesn't work and how to fix it?

useState doesn’t work. Although I did the same in another component and everything was fine.
Line 7:31: React Hook "useState" is called in function "categories" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use"

import React, { useState } from 'react'
import {useDropzone} from 'react-dropzone'
import styles from './categories.module.css';


const categories = () => {
    const [isOpen, setOpen] = useState(false);

    return (
        <div>
            <button className={`styles.menu ${isOpen ? "active" : ""}`} onClick={() => setOpen (!isOpen)}>
                <div className="div">TRP</div>
            </button>
            <nav className={styles.menu}>
            <ul className={styles.menu__list}>
                <li className={styles.menu__item}>TRP</li>
                <li className={styles.menu__item}>Investments</li>
            </ul>
            </nav>
            
        </div>
    );
};


export default categories;