.webp format images not rendering as expected in React

Question

I am encountering an issue with rendering .webp format images in a React application(V18). The Chrome browser is expected to render the first tag within the element, but it seems to be rendering the img tag instead. I have thoroughly checked for errors in the browser console, but no errors are being reported.

Here is my code snippet.

<picture className='h-full w-full'>
     <source srcSet={DataProtect_webp} type="image/webp" />
     <source srcSet={DataProtect_jpg} type="image/jpg" />
    <img src={DataProtect_jpg} className='h-full w-full object-cover p-4 rounded-3xl 
    drop-shadow-3xl'/> 
</picture> 

And these are my imports

import DataProtect_jpg from '../../assets/dataprotect_jpg.jpg';
import DataProtect_webp from '../../assets/dataprotect_webp.webp';

Despite these configurations, the .webp image is not being displayed as expected, and the browser seems to be falling back to the .jpg image. I have also verified the paths to the images and all are correct.

Are there any additional steps or configurations that I might be missing? Thank you for your assistance.