How to set different items in Flyout menu and bottom bar in Xamarin Forms 4.8 version using Shell?

Question

I am developing an application in Xamarin Forms 4.8 version with Shell feature and I need both side menu and bottom bar for navigation. In VS 2019, my AppShell.xaml page is like below,

<Shell xmlns="http://xamarin.com/schemas/2014/forms"   
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
       xmlns:local="clr-namespace:MyApp.Views"  
       xmlns:localHome="clr-namespace:MyApp.Views.Home"  
       xmlns:localOnlineStore="clr-namespace:MyApp.Views.OnlineStores"  
       xmlns:localBooks="clr-namespace:MyApp.Views.BookList"  
       xmlns:localUniforms="clr-namespace:MyApp.Views.Uniforms"  
       xmlns:localUser="clr-namespace:MyApp.Views.User"  
       xmlns:localMyAccount="clr-namespace:MyApp.Views.MyAccount"  
       xmlns:localCart="clr-namespace:MyApp.Views.Cart"  
       xmlns:flyouthead="clr-namespace:MyApp"  
       xmlns:controls="clr-namespace:MyApp.Renderer;assembly=MyApp"  
       Title="MyApp"  
       x:Class="MyApp.AppShell"     
       FlyoutBehavior="Flyout"  
       FlyoutHeaderBehavior="Fixed"  
       FlyoutBackgroundColor="#011948">             
  
       <Shell.Resources>  
           <ResourceDictionary>  
               <Color x:Key="NavigationPrimary">#011948</Color>  
               ...  
               ...  
           </ResourceDictionary>  
        </Shell.Resources>      
  
        <Shell.FlyoutHeader> ... </Shell.FlyoutHeader>   
        <Shell.ItemTemplate> ... </Shell.ItemTemplate>  
        <Shell.MenuItemTemplate> ... </Shell.MenuItemTemplate>  
  
  
       <TabBar>  
          <Tab Title="Home"  
               Icon="ic_home">  
               <ShellContent Route="HomePage" Shell.TabBarBackgroundColor="{StaticResource NavigationPrimary}" ContentTemplate="{DataTemplate localHome:HomePage}" />  
          </Tab>  
          <Tab Title="Books"  
               Icon="ic_book">  
               <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />  
           </Tab>  
           <Tab Title="Cart"  
               Icon="ic_cart">  
               <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />  
           </Tab>  
           <Tab Title="Uniforms"  
               Icon="ic_uniform">  
               <ShellContent Route="UniformsPage" ContentTemplate="{DataTemplate localUniforms:UniformsPage}" />  
           </Tab>  
           <Tab Title="Profile"  
               Icon="ic_profile">  
               <ShellContent Route="MyProfilePage" ContentTemplate="{DataTemplate localMyAccount:MyProfilePage}" />  
            </Tab>  
     </TabBar>      
  
  
     <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">           
         <ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate localOnlineStore:OnlineStorePage}" />  
         <ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate localHome:AboutUsPage}" />  
         <ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate localHome:ContactUsPage}" />  
         <ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate localUser:LoginPage}" />  
      </FlyoutItem>  
  
  
</Shell>  
  

When I run in Android Emulator, my page look in images below

Pic: 1

Pic: 2

When I click on any items in Side menu, the corresponding page load with updated bottom bar items. Refer Pic: 3 below

I don't know why this happens. My need is having items in bottom bar as in Pic: 1 around the application.