How to have a drop down icon and context menu in the header

[JoeVanGundy]

I want to have a context menu similar to google sheets:

I can't seem to wrap my head around how I can insert a component into the component without having to rewrite HeaderRenderer and also SortableHeaderCell.

For example, why doesn't something like this work?

For my column object

headerRender: (p) => <CustomColumnRenderer {...p} />

And then my renderer

function CustomColumnRenderer(p) {
  return (
    <>
      <HeaderRenderer {...p} />
      <div>icon</div>
    </>
  );
}