How do we load the selected Item values from MongoDB for <Select /> in react

Question

I am new to learning React. I have build a small application which includes React,Node and MongoDB. I have two modules here, the Create data and the Edit data. My question is regarding the Select component from Reacts's built in library. When I create a user, I enter his availability time slots(isMulti in Select) from a component. On Submit, this data along with the the slots is getting inserted in the Mongo Db.This is all fine. I am having problem when loading the page for edit. How to make the previously selected items from dropdown show up on page load. The other fields show up fine with componentDidMount().

Here is what my update module looks like-

// eslint-disable-next-line
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Select from 'react-select';

import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

// Connecting from front end to backend with Axios
import axios from "axios";


export default class EditPanel extends Component {
    constructor(props) {
        super(props);
        //defining this
        this.onChangefield1 = this.onChangefield1.bind(this);
        this.onChangefield2 = this.onChangefield2.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.handleChange=this.handleChange.bind(this);

        this.state = {
            field1: "",
            field2: "",
            timeSlots:[],
             
            
            
            filterOptions:[
                { label:"9:00am to 10:00am", value: "9:00am to 10:00am" },
                { label: "10:00am to 11:00am", value: "10:00am to 11:00am" },
                { label: "11:00am to 12:00pm", value: "11:00am to 12:00pm" },
                { label: "12:00pm to 01:00pm", value: "12:00pm to 01:00pm" },
                { label: "01:00pm to 02:00pm", value: "01:00pm to 02:00pm" },
                
                ],
                
                selectedOption:[]
        }

    }
    componentDidMount() {
        console.log("inside componentmount");
        axios.get('http://localhost:5000/someEndpoint/' + this.props.match.params.id)
            .then(response => {
                this.setState({
                    field1: response.data.field1,
                    field2: response.data.field2,
                    mailId: response.data.mailId,
                    
                    timeSlots:response.data.timeSlots,
                    selectedOption: response.data.timeSlots,
                    
                   
                })
                console.log("Meow"+response.data.timeSlots);
            })
            .catch(function (error) {
                console.log(error);
            })

           

    }

    onChangefield1(e) {
        this.setState({ field1: e.target.value });
    }
    onChangefield2(e) {
        this.setState({ field2: e.target.value });
    }
    // This is for insertion of any new selected list items
    handleChange = selectedOption => {
        console.log(selectedOption.value);
        this.setState({ selectedOption: selectedOption.value }); // selected option value
        console.log(selectedOption);
        var dataArray = [];
        for(var o in selectedOption) {
        dataArray.push(selectedOption[o].value);
       
        this.setState({ timeSlots: dataArray });
        console.log(this.timeSlots);
}
      };

    onSubmit(e) {
        e.preventDefault();

        const panel =
        {
            field1: this.state.field1,
            field2: this.state.field2,
            timeSlots:this.state.timeSlots
        }


        axios.post('http://localhost:5000/someEndpoint/update/' + this.props.match.params.id, panel)
            .then(res => console.log(res.data));
        console.log("calling from edit");
        window.location = '/';


    }

    render() {
        return (
            <div>
                <h3>Edit Panel Info</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label>Field 1: </label>
                        <input type="text"
                            required
                            className="form-control"
                            value={this.state.field1}
                            onChange={this.onChangefield1}
                        />
                    </div>
                    <div className="form-group">
                        <label>field2: </label>
                        <input
                            type="text"
                            className="form-control"
                            value={this.state.field1}
                            onChange={this.onChangefield2}
                        />
                    </div>
                    
                    <div className="form-group">
                        <label>Time Slots</label>
                        <div>
                            <Select
                                options={this.state.filterOptions} // Options to display in the dropdown
                                 isMulti
                                 value={this.state.selectedOption} // would like to see the values we have in DB
                                 onChange={this.handleChange}
                                closeIcon="close"
                                
                                
                            />
                        </div>
                    </div>
                    
                    
                     <div className="form-group">
                        <input type="submit" value="Edit Panel" className="btn btn-primary" />
                    </div>
                </form>
            </div>

        )

enter code here
    }

}`enter image description here`

[enter image description here][1]


  [1]: https://i.stack.imgur.com/NliEH.png

The mongo db data looks like timeSlots : Array 0 : "10:00am to 11:00am" 1 : "12:00pm to 01:00pm"