I have a modal that will open with the same inputs with diffrent buttons. but when I type something in the input and then close the modal and then I open it again the data in the input is still in the modal. I'm using react redux for the values of the inputs and for openning and closing the modal. this is my input component :

 <FormControl className="content-select">
                                <Select
                                    name="phoneCallResultId"
                                    value={this.props.violations.phones?.form?.phoneCallResultId || ''}
                                   
                                    onChange={(e) => this.props.handleChangeForm(e)}
                                    displayEmpty
                                    defaultValue=''
                                    className="selectEmpty"
                                    inputProps={{ 'aria-label': 'Without label' }}
                                    >
                                   
                                    {(this.props.violations?.phones?.phoneCallResultsList || []).map((item, index) => {
                                        return (
                                            <MenuItem className="select-title-value" key={index} value={item.id}>{item.name}</MenuItem>
                                        )
                                    })}
                                </Select>
                            </FormControl>

And this is my modal component:

 <DialogViolationContent
                title={this.props.violations.phones.mode != 'read' ?
                    (this.props.violations.phones.mode == 'create') ?
                       
            
                open={this.props.violations.phones.configPhoneModalInfo.open}
                handleClose={() => this.props.togglePhoneModalInfo()}
                aria-labelledby="responsive-dialog-title"
                className="modal-title"
              
                        </div>
                      //this is where the modal will close
                        <Button  className="cancel-info-btn" onClick={() => this.props.togglePhoneModalInfo()}>
                            cancell
                        </Button>
                    </>
                }>
                <PhoneForm />
            </DialogViolationContent>

And here is my reducer :

case ViolationsConstants.TOGGLE_PHONE_INFO_MODAL:
        state.phones.configPhoneModalInfo.open = !state.phones.configPhoneModalInfo.open;
        
        return {
            ...state
        };

Which my initial state is set to : open: false

export const togglePhoneModalInfo = () => dispatch => dispatch({
type: ViolationsConstants.TOGGLE_PHONE_INFO_MODAL
})