Custom inputs containing multiple child inputs

[native wigeon]

hey! i'm trying to figure out the cleanest way to create a custom input component for a duration, which is basically 4 number inputs for days, hours, minutes and seconds. using @mantine/form, what would be the cleanest way to do this?
i have a working solution which involves passing the use-form return value, alongside a field name, to the component, which will then set input props on each number input for a nested field, but that feels a bit jank
any suggestions for a better way to do this would be appreciated <3

export interface Duration {
    days: number,
    hours: number,
    minutes: number,
    seconds: number
}

interface DurationSelectProps<T extends string>
    extends InputBaseProps {
    form: Pick<UseFormReturnType<{ [key in T]: Duration }>, 'getInputProps'>
    field: T
}

const INPUT_BASE_PROPS: NumberInputProps = {
    variant: "unstyled",
    defaultValue: 0,
    min: 0
}

export default function DurationSelect<const T extends string>(props: DurationSelectProps<T>) {
    return <InputBase
        {...props}
        className={classes.duration}
        component={Group}
        wrap={"nowrap"}
        justify={"space-between"}
    >
        <NumberInput
            {...INPUT_BASE_PROPS}
            {...props.form.getInputProps(`${props.field}.days`)}
            rightSection="d"
        />
        {/* rinse and repeat for other fields */}
        </InputBase>
}```

as an aside, would this be a good pattern for composing collections of fields into a larger form?