I have this sample code that use IonSplitPane, What I want here is that in the Main View or Center View have a button that if i click the Left Menu it will close the left menu and the main view or Center View will automatic adjust the size, same behavior with the right menu.

this is my sample code

import React, { useState } from 'react';
import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar, IonButton } from '@ionic/react';

function Example() {
  const [leftMenuOpen, setLeftMenuOpen] = useState(false);
  const [rightMenuOpen, setRightMenuOpen] = useState(false);

  const toggleLeftMenu = () => {
    setLeftMenuOpen(!leftMenuOpen);
  };

  const toggleRightMenu = () => {
    setRightMenuOpen(!rightMenuOpen);
  };

  const closeLeftMenu = () => {
    setLeftMenuOpen(false);
  };

  const closeRightMenu = () => {
    setRightMenuOpen(false);
  };

  return (
    <IonSplitPane when="xs" contentId="main">
      <IonMenu contentId="main" side="start" menuId="left" isOpen={leftMenuOpen} onIonDidClose={() => setLeftMenuOpen(false)} onIonDidOpen={() => setLeftMenuOpen(true)}>
        <IonHeader>
          <IonToolbar color="tertiary">
            <IonTitle>Left Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" onClick={closeLeftMenu}>Left Menu Content</IonContent>
      </IonMenu>

      <IonMenu contentId="main" side="end" menuId="right" isOpen={rightMenuOpen} onIonDidClose={() => setRightMenuOpen(false)} onIonDidOpen={() => setRightMenuOpen(true)}>
        <IonHeader>
          <IonToolbar color="tertiary">
            <IonTitle>Right Menu</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" onClick={closeRightMenu}>Right Menu Content</IonContent>
      </IonMenu>

      <div className="ion-page" id="main">
        <IonHeader>
          <IonToolbar>
            <IonTitle>Main View</IonTitle>
            <IonButton slot="start" onClick={toggleLeftMenu}>Toggle Left Menu</IonButton>
            <IonButton slot="end" onClick={toggleRightMenu}>Toggle Right Menu</IonButton>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">Main View Content</IonContent>
      </div>
    </IonSplitPane>
  );
}

export default Example;