Обработка формы в React TS

имеется кнопка при нажатии на которую открывается модальное окно в котором форма из одного поля. Проблема в том что из-за не получается вытащить данные, хотя если модального окна не будет, все нормально выводиться в консоль, что может быть не так?

interface ISignInForm {
    login: string;
}

export const AddPost: React.FC = () => {
const { handleSubmit, control } = useForm<ISignInForm>();

const onSubmit: SubmitHandler<ISignInForm> = data => console.log(data);


const [open, setOpen] = React.useState(false);

const handleClickOpen = () => {
    setOpen(true);
};

const handleClose = () => {
    setOpen(false);
};
return (
    <div>
        <form className="form" onSubmit={handleSubmit(onSubmit)}>
        <Button variant="outlined" color="primary" onClick={handleClickOpen}>
            Open form dialog
        </Button>
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                <DialogContent>
                    <Controller
                        control={control}
                        name="login"
                        render={({ field }) => (
                        <TextField
                            onChange={(e) => field.onChange(e)}
                            autoFocus
                            margin="dense"
                            id="name"
                            label="Email Address"
                            type="email"
                            fullWidth
                        />
                        )}
                    />
                </DialogContent>
                <DialogActions>
                    <Button onClick={handleClose} color="primary">
                        Cancel
                    </Button>
                    <Button type="submit" color="primary">
                        Ok
                    </Button>
                </DialogActions>
            </Dialog>
        </form>
    </div>
);
}