Why isn’t the popup box closing while testing with React Testing Library?

I’m currently using a module from material-ui-dropzone. Which basically opens a popup dialog box when a button is clicked, and then to close it we just have to click outside the popup or click the cancel button.

screenshot

When I test and try this in the UI, it works PERFECTLY.

however in my test suite I’m struggling a bit. This is my react component:

import React, { useState } from 'react';
import { DropzoneDialog } from 'material-ui-dropzone';

export const UploadBox = () => {
    const [open, setOpen] = useState(false);

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

    const handleClose = () => {
        setOpen(false);
    };

    const handleSubmit = async file => {
        // unrelated logic
    };

    return (
        <div>
            <button onClick={handleClickOpen}>
                Set Picture
            </button>
            <DropzoneDialog
                open={open}
                onSave={handleSubmit}
                acceptedFiles={['image/*']}
                showPreviews={true}
                maxFileSize={5000000}
                onClose={handleClose}
            />
        </div>
    );
};

And this is my testing file:

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { UploadBox } from './UploadBox';
import React from 'react';
import '@testing-library/jest-dom';

describe('UploadBox', () => {
    test('opens upload popup box on button click', () => {
        render(<UploadBox />);

        userEvent.click(screen.getByRole('button'), { name: 'Set Picture' });

        expect(screen.getByText('Upload file')).toBeInTheDocument();
    });

    test('closes upload popup box on cancel button click', () => { // FAILING
        render(<UploadBox />);

        userEvent.click(screen.getByRole('button'), { name: 'Set Picture' });
        userEvent.click(screen.getByText('Cancel'));

        expect(screen.getByText('Upload file')).not.toBeInTheDocument();
    });
});

My last test named closes upload popup box on cancel button click is failing which should not be the case. The message I get is expected document not to contain element, found <h2 class="MuiTypography-root MuiTypography-h6">Upload file</h2> instead, which means that it is still in the document. Any ideas as to why?