¿Como haríamos para que si alguien hace click afuera del modal (es decir, lo sobreado de negro) tambien se cierre el modal?

Aquí puedes ver más ideas para tus modales: https://codeburst.io/modals-in-react-f6c3ff9f4701.

Lo que yo hago es que el componente modal ocupe todo el alto y ancho de la pantalla. Dentro del modal, agrego dos componentes hijos, uno con el contenido normal del modal y otro transparente (o un poco oscuro y con algo de blur) que al darle click cierre el modal. :wink:

Podrias usar el evento onClick de JavaScript sobre el elemento que desees y cuando se ejecute el evento, realizas la accion que deseas.