When passing dynamic content to an ion modal bottom sheet, instead of updating the content in the bottom sheet a new bottom sheet is rendered on top of the previous one, eventually leading to a load of modals on top of each other.

I think this is an ion modal issue and not specifically bottom sheet.

The content is updated when a user navigates to a new url path so it may be a navigation issue or to do with the content updating. Either way you can continue to add modals seemingly infinitely even though the ModalDrawer component below is only called once which isn't the expected behaviour.

Here is the code:

import React from 'react';
import { IonModal } from '@ionic/react';
import DrawerContent from '../DrawerContent';
import { useLocation } from 'react-router';

interface PageProps {
  isOpen: boolean;
  isMobile: boolean;
  selectedLocation: any;
  emissionsData: {id: string, name: string, emissions: string[]}[];
  entitiesByBusinessType: object[];
}

const MobileDrawer: React.FC<PageProps> = (props) => {

  const location = useLocation()

  const modalSubject = props.entitiesByBusinessType  || location.pathname === props.emissionsData[0].id ? (
    <DrawerContent 
      entitiesByBusinessType={props.entitiesByBusinessType}
      emissionsData={props.emissionsData}
      isOpen={props.isOpen}
      isMobile={props.isMobile}
    />
  ) : null

  return (
    <div>
      <IonModal 
        isOpen={true}
        swipeToClose={true}
        breakpoints={[ 0.05, 0.4, 0.95 ]}
        initialBreakpoint={0.4}
        backdropBreakpoint={0.4}
        className="bottom-sheet"
        showBackdrop={true}
        backdropDismiss={false}
        children={modalSubject}
      />
    </div>
  );
};

export default MobileDrawer;

Here are some images to further explain my point:

How the app should act (1 bottom sheet): Normal app behaviour

App with multiple bottom sheets/modals on top of each other: App with 2 stacked modals App with 3 stacked modals