Create a Wizard Component Using Compound Components and useContext React Hook

Our Wizard component lacks flexibility for the user, it does not allow modifying the way its components are rendered. But we can refactor our code to grant this flexibility by using the design pattern known as compound components and a shared state between them. To implicitly share this state we use React's Context API together with the useContext hook that offers a simple and direct way to consume this shared state. With this, the component provides flexibility to the user allowing him to decide how to render each element of the wizard.