This is my UI section

<Button
sx={{ color: '#EBC047' }}
// onClick={}
id="removeSrcButton"
>
X
</Button>
<img
id="imageElement"
src={previewwhatsappImage || ''}
alt=""
style={{ objectFit: 'cover' }}
>

This is logic for performing operation.
I tried this code block functionality to perform operation.

const removeSrcButton = document.getElementById('removeSrcButton') as HTMLButtonElement;
const imageElement = document.getElementById('imageElement') as HTMLImageElement;

if (removeSrcButton && imageElement) {
  removeSrcButton.addEventListener('click', () => {
    imageElement.src = ''; // Remove the src attribute
  });
} else {
  console.error('Button or image element not found.');
}