选择Datetimepicker会重置React中的其他输入字段

我是前端开发的新手，试图在React中创建一个样本页面，我想在其中安排将选定的文件复制到服务器上，这些文件是由用户输入的。对于日期时间，我使用了DateTimePicker。我的页面目前看起来像这样。

这里我面临两个问题：

1. 如果我输入的服务器值是以逗号分隔的多个服务器，然后我从DatePicker中选择时间，它就会重新设置服务器文本区。
2. 这与问题无关，更多的是关于建议。正如你在截图中所看到的，表单中存在一些css对齐问题。请建议我使用React Forms的标准方法，以及使用哪种CSS。有bootstrap，如果我没猜错的话，Formik也有自己的css。所以我有点困惑，作为一个初学者，我应该坚持使用哪一种，以使我的页面看起来不错。

目前我正在使用Formik做这个页面，但不知为何，我无法解决css问题，使我的页面看起来很好，即使不是很好。

这个页面的React代码：

class PackageScheduleComponent extends Component{
    constructor(props){
        super(props)
        this.state = {
            files:[],
            message: null,
            errorMessage:'',
            stores:'',
            scheduleTime:new Date()
        }

        this.handleChange = this.handleChange.bind(this)
        this.onChange = this.onChange.bind(this)
    }

    componentDidMount(){
        this.refresh()
    }

    handleChange(event) {
        this.setState({value: event.target.value});
      }

    refresh() {
        FileService.retrieveAllFiles()
            .then(response => {
                this.setState({
                    files: response.data
                });
            })
            .catch(error=>{
                this.setState({
                    errorMessage: error.data.message
                })
            });
    }

    submitForm(values){
       // event.preventDefault();
        
        let data = {
            files: values.files,
            scheduleTime: values.scheduleTime,
            stores: [...values.stores.split(",")]
        }
        
        PackageScheduleService.schedulePackage(data)
        .then((response)=>{
            console.log(response)
            this.props.navigate('/todos')
        })
        .catch(error=>console.log(error))
        
    }

    onChange(event){
        this.setState({
            scheduleTime: event,
            files: this.state.files,
            stores: this.state.stores
        })
    }

    render(){
        let {files,stores,scheduleTime} = this.state
        return(
            <div>
            
            <h1>Schedule Package</h1>
        
              {this.state.errorMessage && <div className="alert alert-warning">{this.state.errorMessage}</div>}
              <Formik initialValues={{files,stores,scheduleTime}} validateOnChange={false} validateOnBlur={false}
                            enableReinitialize={true} onSubmit={this.submitForm}>
                <Form>
                <fieldset>
                <label htmlFor="packages">Select Package</label>
                <select name="packages" id="packages">
                    {
                        this.state.files.map(
                            file=>
                                <option key={file.name} value={file.name}>{file.name}</option>
                                
                        )
                    }
                    </select>
                </fieldset>
                <fieldset>
                <label htmlFor="stores">
                Stores:</label>
                {/* <textarea id="stores" name="stores" value={this.state.stores} onChange={this.handleChange} /> */}
                <Field className="form-control" id="stores" name="stores" type="textarea"/>
                </fieldset>

                <fieldset>
                <label htmlFor="scheduleTime">
                Date Time:</label>
                <DateTimePicker id="scheduleTime" onChange={this.onChange} value={this.state.scheduleTime}/>
                </fieldset>
                
                <button class="btn btn-success" type="submit">Submit</button>
                
                </Form>
                </Formik>
            </div>
        )
    }
}

export default PackageScheduleComponent