MyComponent.jsx

import React, { useState } from 'react';
import { useTheme } from 'react-jss';
import { useStyles, useConfig } from './assets';

const MyComponent = ({ heading, children, ...props }) => {
  const [isActive, setActive] = useState(false);
  const theme = useTheme();
  const config = useConfig(theme);
  const classes = useStyles({ props, config, state: { isActive } });

  return (
    <div className={classes.root} onClick={() => setActive(!isActive)}>
      <div className={classes.heading}>{heading}</div>
      <div className={classes.content}>{children}</div>
    </div>
  )
}

export default MyComponent;