I am using react-router-navigation-prompt to show a modal window when a user is leaving the page. It works fine, however after updating my dependencies i keep getting this error:

I've tried to forward ref to the child component but It didn't seem to work. Here is my code:
import React from 'react';
import NavigationPrompt from 'react-router-navigation-prompt';
import { CancelChangesDialog } from './CancelChangesDialog';
import _ from 'lodash';
interface Props<T> {
currentForm: T;
initialForm: T;
}
export function LeavingPrompt<T>(props: Props<T>) {
const { currentForm, initialForm } = props;
return (
<NavigationPrompt when={!_.isEqual(currentForm, initialForm)}>
{({ onConfirm, onCancel }) => (
<CancelChangesDialog
open
handleCancel={onCancel}
handleConfirm={onConfirm}
/>
)}
</NavigationPrompt>
);
}
CancelChangesDialog Is the modal view component:
import React from 'react';
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
} from '@material-ui/core';
interface Props {
open: boolean;
handleCancel(): void;
handleConfirm(): void;
}
export function CancelChangesDialog(props: Props) {
const { open, handleCancel, handleConfirm } = props;
return (
<Dialog open={open}>
<DialogTitle id="alert-dialog-title">{'Confirm changes'}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Changes are not saved! Leave anyway?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCancel} color="primary">
Cancel
</Button>
<Button
onClick={handleConfirm}
color="primary"
style={{ textTransform: 'initial' }}
autoFocus
>
Confirm
</Button>
</DialogActions>
</Dialog>
);
}
Any Ideas how to fix this?