How do I apply custom format to all user input in TimePicker?

[jumillar-ms]

It seems that if I set a custom format using the onFormatDate prop in the TimePicker component, it will only apply this format if the time input matches one of the dropdown values. Observe how the custom time separator "." is not applied to 9:10 AM because its minutes value is not 0 or 30 and therefore doesn't match any dropdown preset.

How do I make it so that the custom format is applied to any valid input, including its initial value? My team is using Fluent UI React version 8.110.10 by the way, and I am not sure if newer versions provide this capability.