Prevent an SVG from becoming e.target in React

Let's assume that you have created a React component containing an SVG:

jsx
import React from 'react';

const App = () => {
    
    const handleClick = (e) => {
        
        console.log(e.target);
        
        // Click on the svg  → e.target = <svg>
        
    }
    
    return(
        <div className = 'App'>
            <div className = 'Wrap' onClick = {handleClick}>
                <svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 16 16' width = '16' height = '16'><path fillRule = 'evenodd' d = 'M3.404 3.404a6.5 6.5 0 109.192 9.192 6.5 6.5 0 00-9.192-9.192zm-1.06 10.253A8 8 0 1113.656 2.343 8 8 0 012.343 13.657z'></path></svg>
            </div>
        </div>
    );
    
}

export default App;

A way to target the parent instead of the SVG, is to disable pointer-events property.

Example:

CSS
svg{
    pointer-events: none;
}

Now, if you click on the SVG, e.target = <div class = 'Wrap'>.