Multiple DateTimeRangeContainers

[shanestreator]

It'd be nice to be able to define a id property on DateTimeRangeContainer. All associated actions/values would be bound to the defined id.

<DateTimeRangeContainer id="daterangepicker-1" />
<DateTimeRangeContainer id="daterangepicker-2" />
<DateTimeRangeContainer id="daterangepicker-3" />

Is this a potentially quick feature to implement?

Attempted workaround scenario:

// Successfully mutating the id onMount
useEffect(() => {
        document.querySelector(`.${props.name} .daterangepicker`).setAttribute('id', `${props.name}`)
}, [props])

render (
    <div className={`input-group ${props.name}`}> 
        // QTY 2 ========== (id and class for calendar by default is "daterangepicker")
        <DateTimeRangeContainer> <Form.Control /> </DateTimeRangeContainer> 
        <DateTimeRangeContainer> <Form.Control /> </DateTimeRangeContainer> 
    </div>
)

The [2nd DateTimeRangeContainer] with a unique id updates the [1st DateTimeRangeContainer].