I’m trying to create a time slider in my react app and I can’t beat this error below that keeps showing up in my browser console.

bundle.js:21658 Warning: Encountered two children with the same key, `thumb- 
undefined`. Keys should be unique so that components maintain their identity across 
updates. Non-unique keys may cause children to be duplicated and/or omitted — the 
behavior is unsupported and could change in a future version.

I’m new to react and below is my code – any idea why this is happening?

                    <Card className="mb-3 border-0 shadow-sm">
                        <Card.Body>
                            <Form.Label className="fw-medium pb-2">Time Range</Form.Label>
                            <div className="px-2">
                                <Range
                                    values={timeRange}
                                    step={1}
                                    min={6}
                                    max={21}
                                    onChange={(values) => setTimeRange(values)}
                                    renderTrack={({ props, children }) => {
                                        const { key, ...restProps } = props;
                                        return (
                                            <div
                                                key={`track-${restProps['aria-valuemin']}-${restProps['aria-valuemax']}`}
                                                {...restProps}
                                                style={{
                                                    ...restProps.style,
                                                    height: '6px',
                                                    width: '100%',
                                                    backgroundColor: '#ddd'
                                                }}
                                            >
                                                {children}
                                            </div>
                                        );
                                    }}
                                    renderThumb={({ props, isDragged }, idx) => {
                                        const { key, ...restProps } = props;
                                        return (
                                            <div
                                                key={`thumb-${idx}`}
                                                {...restProps}
                                                style={{
                                                    ...restProps.style,
                                                    height: '24px',
                                                    width: '24px',
                                                    borderRadius: '50%',
                                                    backgroundColor: 'var(--primary-color)',
                                                    display: 'flex',
                                                    justifyContent: 'center',
                                                    alignItems: 'center'
                                                }}
                                            >
                                                <div
                                                    style={{
                                                        height: '16px',
                                                        width: '5px',
                                                        backgroundColor: isDragged ? 'var(--primary-color)' : '#CCC'
                                                    }}
                                                />
                                            </div>
                                        );
                                    }}
                                />
                            </div>
                            <div className="d-flex justify-content-between mt-2">
                                <span>{`${timeRange[0] > 12 ? timeRange[0] - 12 : timeRange[0]}:00 ${timeRange[0] >= 12 ? 'PM' : 'AM'}`}</span>
                                <span>{`${timeRange[1] > 12 ? timeRange[1] - 12 : timeRange[1]}:00 ${timeRange[1] >= 12 ? 'PM' : 'AM'}`}</span>
                            </div>
                        </Card.Body>
                    </Card>

I’ve tweaked the key…props several times and still can’t get it to work. There are several questions on SO that have similar answers but my inexperience is struggling to map those answers to my code snippet. Any help would be appreciated.