Как использовать @material-ui/core/useScrollTrigger в Next.js?

Я изучаю документацию Material-UI useScrollTrigger и пытаюсь применить ее к Next, чтобы повторить панель приложений Elevate.

https://material-ui.com/components/app-bar/#usescrolltrigger-options-trigger

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";

interface Props {
  children: React.ReactElement;
}

function ElevationScroll(props: Props) {
  const children = props;
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0
  });
}

export default class HeaderAppBar {
  render() {
    return (
      <ElevationScroll {...props}>
        <AppBar />
      </ElevationScroll {...props}>
    );
  }
}

Но я получаю ошибку ReferenceError: props is not defined. Пожалуйста, помогите решить проблему.