using prompt of react-router in componentWillUnmount - reactjs

Question

i have a parent component which renders a custom form, i am using redux form on the custom form, what i am trying to do is whenever the child component gets unmounted if there are any values on the form i need to make a prompt to the user do you want to save it or not.
So below is the code, the prompt is not happening, i am using the state and updating the state using dirty(this.props) of redux form.
so after componentWillUnmount the render is not happening. What i am missing, i think after componentWillUnmount the render won't happen.
Please see the below code.
**//APP.js**
import React from 'react';
class App extends Component{
state ={
data = []// array of data
}
render(){
return(
<div>
<CustomForm
data={this.state.data}
/>
</div>
)
}
}
export default App
**//CustomForm.js**
import React from 'react';
import {connect} from 'react-redux';
import CustomField from './CustomField';
import { Field, reduxForm } from 'redux-form';
import {Prompt} from 'react-router'
class CustomForm extends Component{
state ={
formChanged: false
}
onSubmit = (values) => {
console.log(values)
}
componentWillUnmount(){
if(this.props.dirty){
this.setState({
formChanged: true
})
}
}
render(){
return(
<div>
{
this.state.formChanged?
<Prompt
when={shouldBlockNavigation}
message='You have unsaved changes, are you sure you want to leave?'
/>
:
null
}
<Form onSubmit={handleSubmit(this.onSubmit)}>
<Field
name="field1"
type="text"
component={CustomField}
label="field1"
/>
</Form>
</div>
)
}
}
export default reduxForm({
form: "NewForm",
destroyOnUnmount: true,
forceUnregisterOnUnmount: false
})(connect(mapStateToProps, mapDispatchToProps)(CustomForm))