Light box with images

Light box with different sized images. Image 4 will deliberately fail to load.

import { useState } from 'react';
import { LightBox, Image } from '@citizensadvice/react-dialogs';

import image1 from './butterfly_1.jpg';
import image2 from './butterfly_2.jpg';
import image3 from './butterfly_3.jpg';
import image4 from './butterfly_4.jpg';

export function Example() {
  const [show, setShow] = useState();
  const [index, setIndex] = useState(0);

  return (
    <>
      <button
        type="button"
        onClick={() => setShow(!show)}
        aria-expanded={show}
        aria-haspopup="dialog"
      >
        Toggle
      </button>
      {show && (
        <LightBox
          onClose={() => setShow(false)}
          onChangeIndex={setIndex}
          index={index}
        >
          <Image src={image1} title="Blue butterfly" />
          <Image src={image2} title="Green butterfly" />
          <Image src={image3} title="Orange butterfly" />
          <Image src={image4} title="Red butterfly" />
          <Image src="http://invalid/image" title="Can't find me" />
        </LightBox>
      )}
    </>
  );
}