I'm creating a ScrollToTop component by using MUI useScrollTrigger hook https://mui.com/material-ui/react-app-bar/#usescrolltrigger-options-trigger

Here is the sample code: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9z4y

Problems

1. The ScrollTop component doesn't appear after scrolling some pixels even after scrolling to the bottom of the page.

Here is the screenshot. The ScrollToTop component should appear around the area I marked.
As we could see that the trigger value from the useScrollTrigger hook returns a false value. It should return a true value if we scrolled the page.

2. If we uncomment the ScrollToTop component, the ScrollToTop component would appear. Then if we click the ScrollToTop component, the screen would not go to the top of the page.

Here is the screenshot.

Step To Reproduce

For problem 1:

1. Open the demo (codesandbox link) above.
2. Scroll to the bottom of the page.

For problem 2:

1. Open the demo (codesandbox link) above.
2. Comment only the ScrollToTop component.
3. Scroll to the bottom of the page.
4. Click the ScrollToTop component.

Expected conditions

1. For problem 1: the ScrollTop component appears after scrolling some pixels.
2. For problem 2: the ScrollTop component should bring the screen to the top of the page after being clicked.