How to display multiple images in ReactJS?

Question

React

How to display multiple images in ReactJS
Single load example below, how can I select multiple images at once and then display them in ui while
keeping blobUrl in useState for further sending to server, any help would be greatly appreciated

interface ImageObj {
  blobUrl: string
  file: File
}
  const [images, setImages] = React.useState<ImageObj[]>([])

  const onSelectImage = React.useCallback((e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.length) {
      const file = e.target.files[0]
      if (file) {
        const fileObj = new Blob([file])
        setImages((prev) => [
          ...prev,
          {
            blobUrl: URL.createObjectURL(fileObj),
            file,
          },
        ])
      }
    }
  }, [])

<input
                accept='image/*'
                style={{ display: 'none' }}
                id='icon-button-file'
                type='file'
                onChange={(e) => {
                  onSelectImage(e)
                }}
                disabled={images.length >= 4}
              />