How do i add a panel to a particular group?

[linghuaj]

[export const ResourcePanel = ({ ...props }) => {
const panelParams = props.params;

const [panelId, setPanelId] = useState(panelParams.panelId);
return (
    <PanelContext.Provider value={{ panelId, setPanelId }}>
        <Resource nodeId={panelParams.resourceId} viewSize={"L"} redirectMode="live" />
    </PanelContext.Provider>
);

}
](https://dockview.dev/docs/core/panels/add#relative-to-another-panel)

I tried this and it always adds it to a new group, but not the same group as the reference panel.

[mathuo]

Do you the full example of the code you are trying? The approaches to adding panels to particular groups described here should work just fine

[linghuaj]

sandbox link

Here is an example, how do i add "Panel 4" to the same group as "Panel 1" explicitly?

I tried

   event.api.addPanel({
      id: "panel_4",
      component: "default",
      params: { color: "red" },
      position: { referencePanel: "panel_1", direction: "right" }
    });

and 

   event.api.addPanel({
      id: "panel_4",
      component: "default",
      params: { color: "red" },
      position: { referenceGroup: "panel_1", direction: "right" }
    });
    ```
    as the document, both of them add a new group and position that to panel1's group. 

[linghuaj]

Should i use "within"? (btw where do i find the documentation for meanings of all directions?)