How to use the react-jss.withTheme function in react-jss

<button>{theme.primaryColor}</button>
);

class ButtonClassComponent extends React.Component {
  props: ButtonProps;

  render() {
    const { theme } = this.props;

    return (
      <button>{theme.primaryColor}</button>
    );
  }
};

const ThemedButtonFunctionalComponent = withTheme(ButtonFunctionalComponent);

// $ExpectError - missing prop "onClick"
;

// No error
 {}} /&gt;;

const ThemedButtonClassComponent = withTheme(ButtonClassComponent);

// $ExpectError - missing prop "onClick"
;

// No errors
 {}} /&gt;;

// ===================================

return (
      <button>{theme.primaryColor}</button>
    );
  }
};

const ThemedButtonFunctionalComponent = withTheme(ButtonFunctionalComponent);

// $ExpectError - missing prop "onClick"
;

// No error
 {}} /&gt;;

const ThemedButtonClassComponent = withTheme(ButtonClassComponent);

// $ExpectError - missing prop "onClick"
;

// No errors
 {}} /&gt;;

// ===================================
// createTheming
// ===================================

createTheming('__MY_THEME__');

}
      {children}
    
  )
}

FormButton.propTypes = {
  callback: PropTypes.func,
  component: PropTypes.elementType,
  loading: PropTypes.bool,
  loadingComponent: PropTypes.elementType,
  reset: PropTypes.bool,
  children: PropTypes.node.isRequired,
}

export default withTheme(withSubmit(FormButton))

const IconComponent = IconsMap[name] || CustomIcon;

  const passedColor =
    color !== 'inherit'
      ? theme.palette[color.split('-')[0]][color.split('-')[1]]
      : undefined;

  return ;
};

Icon.defaultProps = {
  size: '100%',
  color: 'inherit',
};

export default withTheme(Icon);

);

  const icon = ;

  return <span>{checked ? icon : null}</span>;
}

Checkbox.propTypes = {
  checked: PropTypes.bool,
  disabled: PropTypes.bool,
  className: PropTypes.string,
  theme: PropTypes.shape(),
};

export { Checkbox as Component };
export default withTheme(Checkbox);

if (onMouseLeave) {
      map.on("mouseleave", layerId, e => {
        map.getCanvas().style.cursor = "";
        onMouseLeave(e);
      });
    }

    return () => {
      map.removeLayer(layerId);
    };
  }, []);

  return null;
};

export default withTheme(AirportLayer);

filter: ["==", "type", "arrival"]
    });

    return () => {
      ["trajectory", "arrival"].forEach(layer => {
        if (map.getLayer(layer)) {
          map.removeLayer(layer);
        }
      });
    };
  }, []);

  return null;
};

export default withTheme(FlightTrajectoryLayer);

if (onClick) {
      map.on("click", id, e => {
        onClick(e);
      });
    }

    return () => {
      map.removeLayer(id);
    };
  }, []);

  return {children};
};

export default withTheme(FlightLayer);