NOTE: To be able to close the side menu in a React Iionic application, the screen size must me smaller to be able to toggle the side menu. If the application is rendered into a large screen, the side menu will be shown by default and the code will not work because it must be a smaller screen where the side menu is minimized.

1. Step 1 - Import menuController

import { menuController } from '@ionic/core/components';

1. Step 2 - Create a function to be called when the button is clicked or whenever you want it to run in your code.

  const toggleSideMenu = async () => {
    await menuController.toggle(); // .close() or .open()
  };

2. Step 3 - Add the JSX code for the button to trigger the toggle to open or close.

<button onClick={toggleSideMenu}>Toggle Side Menu</button>

That is it, Done and simple solution.

More Info: https://ionicframework.com/docs/ja/v6/api/menu

Ionic - Side Menu Close Button Example Code