function PathStep(props) {
    const { name, label, hasError, className, style } = props;
    const {
        selectedIndex,
        hoveredIndex,
        privateGetStepIndex,
        privateGetStepZIndex,
        privateRegisterStep,
        privateUnregisterStep,
        privateUpdateStepProps,
        privateUpdateHoveredStep,
        privateOnClick,
    } = useContext(PathContext);
    const stepRef = useRef();

    useEffect(() => {
        privateRegisterStep(stepRef.current, { name, label, hasError });

        return () => {
            privateUnregisterStep(stepRef, name);
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        privateUpdateStepProps({
            name,
            label,
            hasError,
        });
    }, [name, label, hasError, privateUpdateStepProps]);

    const index = privateGetStepIndex(name);

    const activeStepIndex = useMemo(
        () =>
            getActiveStepIndex({
                hoveredIndex,
                selectedIndex,
            }),
        [hoveredIndex, selectedIndex],
    );

    const isChecked = activeStepIndex > index;
    const isSelected = useMemo(
        () =>
            isStepSelected({
                index,
                hoveredIndex,
                selectedIndex,
            }),
        [hoveredIndex, index, selectedIndex],
    );

    const renderCheckIcon = !hasError && (isChecked || isSelected || activeStepIndex === index);

    return (
        <StyledStepItem
            ref={stepRef}
            role="option"
            className={className}
            style={style}
            isSelected={isSelected}
            hasError={hasError}
            isChecked={isChecked}
            zIndex={privateGetStepZIndex(name)}
            onClick={() => privateOnClick(name)}
            onMouseEnter={() => privateUpdateHoveredStep(name)}
            onMouseLeave={() => privateUpdateHoveredStep(null)}
        >
            {label}
            <RenderIf isTrue={renderCheckIcon}>
                <CheckMark />
            </RenderIf>
            <RenderIf isTrue={hasError}>
                <Exclamation />
            </RenderIf>
        </StyledStepItem>
    );
}
The PathStep component displays progress through a sequence of
logical and numbered steps. Path and PathStep components are
related and should be implemented together.