Set state of parent from child component - reactjs

Question

I am working on this for hours now and I don't know what I have to do to make it work.
I have a parent component that has a child which is a modal dialogue. This dialogue has a date picker that has two attributes focused and onFocusChange.
The relevant parts of the parent component before the render() method:
class Terminkalender extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.setEventData = this.setEventData.bind(this);
this.selectElementPatient = this.selectElementPatient.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
this.toggleFocus = this.toggleFocus.bind(this);
moment.locale('de');
this.state = {
patient: null,
appointments: [{end: '2018-08-25T11:57:27.512Z', title: 'TEST', start: '2018-08-25T11:57:27.512Z'}],
time: '10:00',
inputValue: ''
}
}
componentDidMount() {
this.setState({
appointments: this.state.appointments.map(a => Object.assign({}, a, { end: new Date(a.end), start: new Date(a.start) })),
});
}
setEventData(event) {
this.setState({
timeStart: event.start.getHours() + ":" + event.start.getMinutes(),
timeEnd: event.end.getHours() + ":" + event.end.getMinutes(),
date: event,
disabled: true,
modal: !this.state.modal
});
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
handleDateChange(newDate) {
this.setState({
date: newDate
});
}
toggleFocus(toggleFocused) {
this.setState({
focused: !this.state.focused
});
}
The child component in the parent component:
<AppointmentModal
focused={this.state.focused}
toggleFocus={this.toggleFocus}
patient={this.state.patient}
handleDateChange={this.handleDateChange}
date={this.state.date}
/>
Here is the date picker that uses focused and toggleFocus():
<SingleDatePicker
inputIconPosition="after"
block={false}
numberOfMonths={1}
date={this.props.date ? moment(this.props.date): null}
onDateChange={date => this.props.handleDateChange(date)}
focused={this.props.focused}
onFocusChange={this.props.toggleFocus}
/>
The problem I have now, is that the opening mechanism that is toggled by the function toggleFocus doesn't seem the work. When I click on the field of SingleDatePicker I can see in the console that focused is set two times to true.
What do I need to change so that if I click on the field and trigger the toggleFocus() function, I set focused to true and when I click out or click one date, it is set to false.
EDIT: The SingleDatePicker is from react-dates.
EDIT2, the render() method:
render() {
return (
<div className="animated">
<Card>
<CardBody style={{height: '50em'}}>
<Button type="submit" size="sm" color="success" className="mb-3 p-1"><i className="fa fa-plus"></i> Neuer Termin</Button>
<BigCalendar className="d-sm-down-none"
{...this.props}
selectable
events={this.state.appointments}
views={['month', 'week', 'day']}
step={15}
defaultDate={new Date(currYear, currMonth, 1)}
defaultView='week'
toolbar={true}
messages={{month:"Monat", week:"Woche", day:"Tag", today:"Heute", previous:"Zurück", next:"Weiter"}}
culture="de"
onSelectSlot={this.setEventData}
onSelectEvent={this.setEventData}
/>
<BigCalendar className="d-md-none"
{...this.props}
selectable
events={this.state.appointments}
views={['day']}
step={15}
defaultDate={new Date(currYear, currMonth, 1)}
defaultView='day'
toolbar={true}
messages={{day:"Tag"}}
culture="de"
/>
<AppointmentModal
timeStart={this.state.timeStart}
timeEnd={this.state.timeEnd}
modal={this.state.modal}
onChange={this.toggle}
selectElementPatient={this.selectElementPatient}
focused={this.state.focused}
toggleFocus={this.toggleFocus}
patient={this.state.patient}
handleDateChange={this.handleDateChange}
date={this.state.date}
/>
</CardBody>
</Card>
</div>
);
}
EDIT 3: The AppointmentModalcomponent:
class AppointmentModal extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal isOpen={this.props.modal} toggle={this.props.onChange}>
<ModalHeader toggle={this.props.onChange}>Neuer Termin</ModalHeader>
<ModalBody>
<FormGroup row>
<Col md="3">
<Label htmlFor="anfang">Zeit:</Label>
</Col>
<Col xs="12" md="9">
<SingleDatePicker
inputIconPosition="after"
block={false}
numberOfMonths={1}
date={this.props.date ? moment(this.props.date): null}
onDateChange={date => this.props.handleDateChange(date)}
focused={this.props.focused}
onFocusChange={this.props.toggleFocus}
openDirection="down"
hideKeyboardShortcutsPanel={true}
placeholder="Tag"
displayFormat={() => moment.localeData().longDateFormat('L')}
/>
</Col>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.props.onChange}>Speichern</Button>{' '}
<Button color="secondary" onClick={this.props.onChange}>Abbrechen</Button>
</ModalFooter>
</Modal>
);
}
}
export default AppointmentModal;