Issue rendering custom View component

My apologies if I am missing something obvious here, but I have been trying to figure this out for a while after looking at the examples in the documentation. I tried to use the same styles as the Alternative Media custom View example from the docs. Perhaps I am missing the correct styles.

Any help would be greatly appreciated! Perhaps we can include another example in the docs with just this simple use case. I think a lot of people would want to replace the View with the sole purpose of having their own lazy-loading or something.

**Steps to reproduce the behavior:**
1) With code like this:
```
import React from 'react';
import { makeStyles, useTheme } from '@material-ui/styles';
import Carousel, { Modal, ModalGateway } from 'react-images';
import Img from 'gatsby-image';

const useStyles = makeStyles({
container: {
height: 'auto',
maxHeight: '100vh',
maxWidth: '100%',
userSelect: 'none',
},
image: {
width: '100%',
height: 'auto',
},
});

const View = (props) => {
const classes = useStyles();
const { data } = props;

return (

);
};

const Lightbox = (props) => {
const { onClose, images, currentPhoto } = props;
const theme = useTheme();

const modalStyles = {
positioner: base => ({
...base,
zIndex: theme.zIndex.appBar + 1,
}),
blanket: base => ({
...base,
zIndex: theme.zIndex.appBar + 1,
}),
};

return (

{Number.isInteger(currentPhoto) && (



)}

);
};

export default Lightbox;
```

**Expected behavior:**
The View component should look the same as the default View (in terms of CSS), but with a new Img component instead.

**Actual behavior:**
The Modal opens with no image rendered and the navigation buttons are directly in the center since the View has no width.