I am trying to sort the mapped values for week day names.

I have an array `defaultDays` which contains daynames.

`defaultDays` could be `["friday", "monday", "thursday"]` or `["monday", "thursday"]` (day names could be in any order)

based on the values in `defaultDays`, I create time picker in the same order as per values in `defaultDays` order.

How can I sort below elements to show day names in order? Help is appreciated!

```
<Row className="marginBottom15">
        <Row className="marginBottom10">
          <Col>Store Hours:</Col>
          <Col className="marginLeft15">
            <Checkbox.Group
              defaultValue={defaultDays}
              onChange={onCheckBoxChange}>
              <Checkbox value="monday">Monday</Checkbox>
              <Checkbox value="tuesday">Tuesday</Checkbox>
              <Checkbox value="wednesday">Wednesday</Checkbox>
              <Checkbox value="thursday">Thursday</Checkbox>
              <Checkbox value="friday">Friday</Checkbox>
              <Checkbox value="saturday">Saturday</Checkbox>
              <Checkbox value="sunday">Sunday</Checkbox>
            </Checkbox.Group>
          </Col>
        </Row>

        {defaultDays.map((day) => {
          return (
            <Row className="alignBaseline flexWrapper marginTop5">
              <Col className="width100px">{toTitleCase(day)}</Col>
              <Col className="marginLeft15 ">
                <Form.Item
                  className="fullWidth"
                  name={`${day}StartTime`}
                  label="Start Time">
                  <TimePicker
                    defaultValue={_commonTime.startTime}
                    onChange={(time) =>
                      onTimeChange(time, `${day}StartTime`, `${day}`)
                    }
                    minuteStep={15}
                    format={timeFormat}
                  />
                </Form.Item>
              </Col>
              <Col className="marginLeft30">
                <Form.Item
                  className="fullWidth"
                  name={`${day}EndTime`}
                  label="End Time">
                  <TimePicker
                    defaultValue={_commonTime.endTime}
                    onChange={(time) =>
                      onTimeChange(time, `${day}EndTime`, `${day}`)
                    }
                    minuteStep={15}
                    format={timeFormat}
                  />
                </Form.Item>
              </Col>
            </Row>
          );
        })}
      </Row>

      function onCheckBoxChange(checkedValues) {
        setDefaultDays(checkedValues);
}

```

This is how it looks currently:
[![enter image description here](https://i.stack.imgur.com/6RKjt.png)](https://i.stack.imgur.com/6RKjt.png)

**you might be wondering how this list is created unordered in first place?**

answer : I am showing all 7 checkboxes in proper order.
When user clicks on any checkbox it created the first day row with time pickers.

e.g. user clicks friday checbox first, it created time pickers for friday and so on...

I need to rearrange below rows maps elements according to day order.

checkbox order has nothing really has to do with below order.

Here is sandbox link -
<https://codesandbox.io/s/sleepy-haze-i5vdy?file=/pages/index.js>