fix(time): onChange event not giving the correct values for hours/minutes

[mihai-albu-sage]

fixes: #7251

Proposed behaviour

A useEffect has been added to keep inputValues and formattedInputValues in sync with the received value when this is changed. This useEffect will run only when the component is controlled and the value is updated. This ensures that the onChange event contains the correct values. The TimeInputEvent has also been added to the exported types.

time-after.mp4

Current behaviour

In the current behavior, when the initial value is changed, the inputValues and formattedInputValues are not updated causing them to return wrong values for the onChange event.

time-before.mp4

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions