MyComponent.jsx

import React, { useState, useContext } from 'react';
import someContextObject from '../someContext';

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

const MyComponent = (props) => {
  const [isActive, setActive] = useState(false);
  const context = useContext(someContextObject);
  const styles = useStyles({ props, context, state: { isActive } });
  
  return (
    <div style={styles} onClick={() => setActive(!isActive)}>
      <div style={styles.heading}>{props.heading}</div>
      <div style={styles.content}>{props.children}</div>
    </div>
  )
}

export default MyComponent;