How can i do Inset FAB using Material UI in React?

Question

i'm currently i'm working in a project that is required to have a "Inset Fab" button between containers. I saw in the Material Design documentation that the name of the component is called "Inset FAB", i'd got some tutorials on google (but didn't find many) on how to implement, but normally they are "workaround" (setting a background border with radius behind the button). I'm still puzzled in how to do it. Currently i'm using the MUI/Material UI 5.

Example of inset Fab

Answer 1

from what i understand inset is done through box shadows. specifically

boxShadow: "0px 0px 0px 5px white inset"

here is a codesandbox i threw together https://codesandbox.io/s/react-mui-forked-8omkz?file=/index.js