StepperField controlled element doesn't update UI on external state changes

[alharris-at]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create React App

Please describe your bug.

If I set up a controlled StepperField component, everything works swimmingly until I update the state from outside the onChange event of the component itself. The underlying value DOES update, but the UI does not. Subsequent changes to the ui controls will catch the component up however.

What's the expected behaviour?

External changes to StepperField value will update the UI accordingly.

Help us reproduce the bug!

Set up the App

npx create-react-app bug-repro
cd bug-repro
npm i @aws-amplify/ui-react
cat > src/App.js <<- EOM
import { useState } from 'react';
import '@aws-amplify/ui-react/styles.css';
import { AmplifyProvider, Flex, Heading, StepperField, Text, Button, defaultTheme } from "@aws-amplify/ui-react";

export default function App() {
  const [stepperFieldInputValue, setStepperFieldInputValue] = useState(0);
  const setStepperFieldValueClick = () => setStepperFieldInputValue(9);
  return (
    <AmplifyProvider theme={defaultTheme}>
      <Heading level={2}>StepperField Bug Repro</Heading>
      <Flex direction="row">
        <StepperField value={stepperFieldInputValue} onStepChange={(value) => setStepperFieldInputValue(value)} />
        <Text>Current Value: {stepperFieldInputValue}</Text>
        <Button onClick={setStepperFieldValueClick}>Set StepperFieldValue</Button>
      </Flex>
    </AmplifyProvider>
  );
}
EOM
npm start

Then go into the ui , click 'Set StepperFieldValue', then update the value using ui controls.

Code Snippet

See Repro Steps

Additional information and screenshots

This seems closely related to #1284, but opened as a separate issue in case they're not the same underlying issue.