Stepper focused item doesn't change if value is changed programatically

Hi,

We are using the Stepper as feedback to let a user know what stage of a process they are up to rather than an interactive element i.e. we have a Stepper with no onChange or onFocus, an array of items, and the value is set programatically when the user loads data.

const items: StepProps[] = [ ... ];
const currentStep = items.findIndex((i) => i.key === props.currentStep);

return <Stepper value={currentStep} items={items} />;

On initial page load the stepper renders correctly, however on page refresh if the step changes then the previous step icon is still focused (with a ring around the icon) and remains focused even if another step is clicked. Similar behaviour can be observed on the Display Modes demo on the telerik site https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes/, if you remove the onChange handler for the Steps with icons Stepper and then change the value by clicking on a different stepper e.g. https://react-vbgv3y.stackblitz.io.

Please see attached for a screenshot. Is this intended behaviour? Is there any way to use the stepper without this focus behaviour given that in this use case it is for feedback only? Is there a different control that would be more suited for this purpose?

Kind regards,

David