React swipeable bottom sheet with nested scrollable list

Hello there!

We are developing a react app (with material-ui). For a bottom-sheet functionality we need your help.
We ask you to develop a React app containing an empty page with a bottom sheet.
The bottom sheet consists out of thre areas: header, control and content.
The control area is collapsable/expandable depending on the swipe/scroll height.
Inside the content area we need a swipeable/scrollable list (e.g. react-window).

In the attached video you can see the behavior (partially).

All transitions are defined in the attached wireframes.pdf.

It's a mobile only app.

Backgound:
We develop a comparison website. Visitors will find comparison buttons on most pages of our website.
If they click a comparison button. A list of items is loaded and on the bottom appears a "bottom sheet" which they can swipe up to open/expand.

We are using material-ui.

The PDF contains all transitions.

To understand the elevation diagram please have a look at:
https://material.io/design/environment/elevation.html

Please also see the material design "crane design study". This example is very close to what we want.
https://material.io/design/material-studies/crane.html#layout

Thanks,
Vincent