I am using MUI, typescript, nextjs, with the new approuter.

I would like to hijack the browser’s back button behavior when the modal is open, so that it would close the modal instead of going to previous page in the browser, this is the intuitive behavior for mobile users.

Please use this simplified boilerplate to avoid complexity:

"use client"
import { Modal } from '@mui/material'
import { useState } from 'react'

export default function Component() {
    const [open, setOpen] = useState(false)

    return (
        <>
            <Modal
                open={open}
                onClose={() => setOpen(false)}
                style={{ display: "flex", alignItems: "center", justifyContent: "center" }}
            >
                <div style={{ background: "white", padding: "100px" }}>
                    hi
                </div>
            </Modal>
            
            <button onClick={() => setOpen(true)}>
                open modal
            </button>
        </>
    )
}