Add the ability to customize the rendered overlay component

[chwallen]

Really like this project but one thing I find missing is to render a custom overlay component.

Why I would like this is because we use Material UI for styling which uses CSS-in-JS with themes. All of our dynamic CSS is controlled through CSS-in-JS and their theme system except this component. The reason is because we can't inject one of their components as the overlay.

I propose a new prop called overlayComponent (or similar) which defaults to 'div' (to keep backwards compatibility) which is rendered instead of the explicit div-component referenced below.

https://github.com/stipsan/react-spring-bottom-sheet/blob/3dfcaa5505a4c08cdb6bea295b52388eb1a967d5/src/BottomSheet.tsx#L649-L653

For example, it would look something like this:

// BottomSheet.tsx
>(function BottomSheetInternal(
  ...
  overlayComponent: OverlayComponent = 'div',
  ...
},
  forwardRef
) {
...
// Lines 649 - 653:
<OverlayComponent
  key="overlay"
  aria-modal="true"
  role="dialog"
  data-rsbs-overlay
  ...
>
...

// MyApp.js
import { Paper } from '@mui/material';
import { BottomSheet } from 'react-spring-bottom-sheet';
...
<BottomSheet
  overlayComponent={Paper}
  ...
>

If you think this seems like a good idea, I can implement this and submit a PR.