Как я могу отозвать (удалить) предварительный просмотр изображения, созданного с помощью URL.createObjectUrl?

Question

Итак, я сделал предварительный просмотр изображения на экране, и теперь я создал кнопку, которая должна его удалить. Вот что у меня есть на данный момент:

установите переменную состояния, которая представляет предварительный просмотр:

const [imagePreview, setImagePreview] = React.useState(null);

создать функцию для установки предварительного просмотра для выбранного изображения и передать captureImagePreview к входу, который помещает выбранное изображение на экран в качестве предварительного просмотра:

const captureImagePreview = evt => setImagePreview(URL.createObjectURL(evt.target.files[0]));
const revokeImagePreview = () => setImagePreview(URL.revokeObjectURL(imagePreview));

и это блок, в котором предварительный просмотр отображается на экране

{imagePreview ? (
    <div className="image-preview">
        <img src={imagePreview} alt="" style={{ width: '100%', height: '100%' }} />
        <i className="far fa-times-circle" onClick={revokeImageFileAndPreview}></i>
    </div>
) : <p>No image</p>}

До этого момента все работает нормально, но когда я нажимаю на элемент i, чтобы выполнить функцию revokeImagePreview чтобы отменить этот процесс, надеясь, что предварительный просмотр исчезнет с экрана, он вообще не исчезнет.

Как сделать так, чтобы превью исчезло одним нажатием кнопки?