Svg clip-path not working on iOS (chrome, safari and firefox) - css

Question

I am using svg clip-path in react, it works fine in google chrome, firefox on Desktop and Android but not safari (iOS and Desktop) and google chrome (on iOS).
This is my code:
<svg
viewBox="0 0 224 224"
fill="none"
xmlns="http://www.w3.org/2000/svg"
ref={svgRef}
className={classNames("rounded-full", className)}
style={{ clipPath: "url(#clipPath)", WebkitClipPath: "url(#clipPath)" }}
>
<defs>
<clipPath id="clipPath">
<path d={path} />
</clipPath>
</defs>
<path d={path} fill={colors.lightGray} className="mix-blend-darken" />
</svg>
The svg element has a conic-gradient
This is the working result
This the non working result (iOS and Safari)

Answer 1

I finally found the solution:
I had to apply the clipPath to a div containing the svg element, the final code :
<div className={classNames("rounded-full", className)} style={{ clipPath: "url(#clipPath)" }}>
<svg viewBox="0 0 224 224" fill="none" xmlns="http://www.w3.org/2000/svg" ref={svgRef}>
<defs>
<clipPath id="clipPath">
<path d={path} />
</clipPath>
</defs>
<path d={path} fill={colors.lightGray} className="mix-blend-darken" />
</svg>
</div>