MyComponent.jsx

import React, { useState, useContext } from 'react';

const styles = ({ props, state, context, theme }) => ({
  ...
});

const MyComponent = (props) => {
  const [isActive, setActive] = useState(false);
  
  return (
    <Module styles={styles} isActive={isActive} onClick={() => setActive(!isActive)}>
      <Component name='heading' strong>{props.heading}</Component>
      <Component name='content'>{props.children}</Component>
    </Module>
  )
}

export default MyComponent;