headerComponents for PaneViewReact is never used and cannot set height because harcoded to 22px

[756D61]

Cannot set custom header component nor custom height for PaneViewReact. My goal is to set the height of the PaneViewHeader, seems it is hardcoded somewhere.

const PaneViewHeader = (props: IPaneviewPanelProps<{ title: string }>) => {
  const [expanded, setExpanded] = useState<boolean>(props.api.isExpanded);

  debugger;

  useEffect(() => {
    const disposable = props.api.onDidExpansionChange((event) => {
      setExpanded(event.isExpanded);
    });

    return () => {
      disposable.dispose();
    };
  }, []);

  const onClick = () => {
    props.api.setExpanded(!expanded);
  };

  return (
    <div className="bg-red-500">
      <a onClick={onClick} className={expanded ? "expanded" : "collapsed"} />
      <span>{props.params.title} sssss</span>
    </div>
  );
};

const FiltersPane = (props) => {
  const components = {
    default: (props) => {
      return (
        <div className="h-full bg-amber-400">{props.params.filterName}</div>
      );
    },
  };

  const onReady = (event: PaneviewReadyEvent) => {
    event.api.addPanel({
      id: "titleFilter",
      component: "default",
      title: "Title",
      params: {
        filterName: "titleFilter",
      },
    });
    event.api.addPanel({
      id: "contractFilter",
      component: "default",
      title: "Contract",
      params: {
        filterName: "contractFilter",
      },
    });
  };

  return (
    <PaneviewReact
      components={components}
      onReady={onReady}
      headerComponents={{ default: PaneViewHeader }}
    />
  );
};

Event though I have the debugger inside PaneViewHeader, I could not never enter there.

In any case, please improve the documentation.