useSteps error

[Manubi]

Describe Your Environment

**What version of Spectacle are you using?
latest 9.6.0

What version of React are you using? (can be found by running npm list --depth 0 react)
latest 18.2.0
What browser are you using? (e.g., Chrome 105.0.5195.102, Safari 16.0)
Chrome latest
What platform are you on? (e.g., Windows, macOS, iOS, Android)
macOS latest

Describe the Problem

As soon as I try to add the useSteps hook into an component I get an error and a white screen.

Code looks like this.

import { FlexBox, Heading, Slide, useSteps } from "spectacle";

export const WhyPunk = () => {
  const { stepId, isActive, step, placeholder } = useSteps();

  return (
    <Slide backgroundColor="primary">
      {isActive ?? (
        <p>
          `${step} - ${placeholder}`
        </p>
      )}
      <Heading margin="0px" fontSize="h1" style={{ fontFamily: "faktumBold" }}>
        Reasons
      </Heading>
    </Slide>
  );
};

Thanks for your help!

[fritz-c]

useSteps needs to be used from inside a component that is nested somewhere under a Slide component, so it can receive the value from SlideContext. I suppose we could provide a better warning message for this case, and perhaps document it a bit better in the documentation.

Demo of how to use it:
https://codesandbox.io/s/usesteps-demo-spectacle-gtfjxl?file=/src/index.js