opening a modal with the click of a button
You are trying to render the modal only once the button is clicked, while that's quite natural for non-react environments, in react it works in a different way. In the simplest solution the Modal should be always rendered, and when a user clicks the button you change the modal open property to true.
{ /* all the markup of your page */ }<button onClick={() => this.setState({showModal: true})}>Add Work Log</button>{ /* anything else */ }{ /* modal is here but it is hidden */ }<Modal open={this.state.showModal}>...</Modal>Alternatively, you can just skip the modal rendering at all until the showModal becomes true.
this.state.showModal && <Modal open>...</Modal>