Ionic React 2nd split pane positioned on the right side

Ionic Framework Ionic React
1

Hello Fellow members,

Is there a way to split ionic react window into 3 parts - I’m trying to have a list of items (projects) on left pane, the details of the selected item on the centre pane and right side pane has the list of people/ updates associated with the project. Both left and right pane to collapsible manually.

I tired with IonSplitPane, first I’ve tried to move the pane to the right using slot=“right” or slot=“end” , it didnt work.

Saw a old issue closed which had a attribute to set the side=“right” but there is no property in Ionic-react version. may be present only in angular.( dont know)

Secondly, How to set more than one pane -
the code below does render more than one pane (overlapped, as I m not sure how to reposition the second one) and main content is put behind the IonSplitPane. Is there a way to have Main Content only in the visible area and not be partly hidden behind the split pane.

      <IonPage >
        <IonContent>
          <p>Main Page Contents here</p>
        </IonContent>

        <IonSplitPane  >
          <IonContent >
            <p>Pane 1 (one) content</p>
          </IonContent>
        </IonSplitPane>

        <IonSplitPane  slot="right">
          <IonContent >
            <p>Pane 2 (two) content </p>
          </IonContent>
        </IonSplitPane>

      </IonPage>

Thanks for the support, any ideas is really appreciated.