[Bug] Replace UI Component doesn't work properly (`PanelHeaderFactory`)

**Describe the bug**
Redefined a component (here `PanelHeaderFactory`) and using the pattern shown [here in the docs](https://docs.kepler.gl/docs/api-reference/advanced-usages/replace-ui-component) the replace seems like to "lose some pieces" during the final render.

Main goal is to use, as shown in the docs, the `visStateLens` to access the state of the map (ex: the loaded datasets) adding an item on the header that, once clicked, do something with this information.

I make it works, but losing some items originally available in the header before replacing it.

**To Reproduce**
Here below the code used to replace the `PanelHeaderFactory`.

```js
import React from "react";
import {PanelHeaderFactory, Icons, withState} from '@kepler.gl/components';
import {USER_GUIDE_DOC} from '@kepler.gl/constants';
import {visStateLens} from '@kepler.gl/reducers';

export function CustomPanelHeaderFactory({visState, deps}) {

const MyPanelHeader = PanelHeaderFactory(...deps);
const defaultActionItems = MyPanelHeader.defaultProps.actionItems

MyPanelHeader.defaultProps = {
...MyPanelHeader.defaultProps,
actionItems: [
{
// visible and working
id: 'count',
iconComponent: Icons.Reset,
blank: true,
tooltip: 'Count all dataset',
onClick:() => {
// here simple example just to access `visState` -> this works
console.log(Object.keys(visState.datasets).length)
}
},
{
// visible and working
id: 'docs',
iconComponent: Icons.Docs,
href: USER_GUIDE_DOC,
blank: true,
tooltip: 'User Guide',
onClick: () => {}
},
{
// this is visible (icon is there) but doesn't work
...defaultActionItems.find(item => item.id === 'save'),
label: null,
tooltip: 'Share'
},
{
// this is not visible at all!
...defaultActionItems.find(item => item.id === 'storage'), // this is no
},

]
};

// console.log() // `MyPanelHeader` has all the `actionItems` correctly defined
return
};

const myCustomHeaderFactory = (...deps) => withState(
[visStateLens],
state => ({
deps: [...deps]
}),
{}
)(CustomPanelHeaderFactory);

myCustomHeaderFactory.deps = PanelHeaderFactory.deps;

export function replacePanelHeader() {
return [PanelHeaderFactory, myCustomHeaderFactory];
}
```

Note that `replacePanelHeader()` is than called in `app.js` using `injectComponents()` properly.

**Expected behavior**
I want to see all the working icons already there before the replacing plus the one crafted (in this case, "count")

**Screenshots**
Result after replacing

**Desktop (please complete the following information):**
- OS: Windows 10
- Browser: Brave, Chrome
- Kepler version: 3.0.0-alpha.0

Start with the advanced UI-component replacement documentation and the PanelHeaderFactory, then trace replacePanelHeader through injectComponents() in app.js. Reproduce the replacement with the supplied actionItems and compare the save and storage actions with the originals; done means all existing working icons remain available alongside the custom count action.

Written by the indexing model from the issue text.