Css clip path inside another clip path not working properly (REACT) - css

Question

I'm using react on a project and I'm trying to figure out how to make a combination of two clip path. But they are interacting in some way. if I deactivate the css line (clip) of the parent component the clip-path work fine on the child component but if both work at the same time I get a visual error. The backdrop blur doesn't get the masking and the background color works fine.
// Initial State
// Disabling parent clip-path
// HTML(JSX) parent
import React from 'react'
import ImgSlider from '../config/ImgSlider'
import logoWhite from '../img/logo-white.png'
export default function start() {
return (
<div className="container-inside" >
<div className='container-start'>
<h1 style={{color: 'white'}}>¡Personalizá tu regalo!</h1>
<div className='button-start'>
<svg className='svg'>
<defs>
<clipPath id="starClip" clipPathUnits="objectBoundingBox"><path d="M0.5,0.76 L0.277,1 L0.321,0.672 L0,0.643 L0.278,0.474 L0.099,0.198 L0.401,0.315 L0.5,0 L0.599,0.315 L0.901,0.198 L0.722,0.474 L1,0.643 L0.678,0.671 L0.722,0.999 L0.5,0.76"></path></clipPath>
</defs>
</svg>
<button className="starClip">
<h2>start</h2>
</button>
</div>
<img className='logo' alt="logo"/>
</div>
<ImgSlider />
</div>
);
}
// CSS parent
.clipped {
justify-content: center;
width: 100%;
height: 87vh;
background: #F2E9DB;
background-size: cover;
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
z-index: 1;
overflow: hidden;
}
// HTML(JSX) child
import React from 'react'
import ImgSlider from '../config/ImgSlider'
import logoWhite from '../img/logo-white.png'
export default function start() {
return (
<div className="container-inside" >
<div className='container-start'>
<h1 style={{color: 'white'}}>¡Personalizá tu regalo!</h1>
<div className='button-start'>
<svg className='svg'>
<defs>
<clipPath id="starClip" clipPathUnits="objectBoundingBox"><path d="M0.5,0.76 L0.277,1 L0.321,0.672 L0,0.643 L0.278,0.474 L0.099,0.198 L0.401,0.315 L0.5,0 L0.599,0.315 L0.901,0.198 L0.722,0.474 L1,0.643 L0.678,0.671 L0.722,0.999 L0.5,0.76"></path></clipPath>
</defs>
<g className="starClip" clipPath="url(#starClip)">
<button>
<h2>start</h2>
</button>
</g>
</svg>
</div>
<img className='logo' alt="logo"/>
</div>
<ImgSlider />
</div>
);
}
// CSS Child
.container-inside{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.container-start{
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
z-index: 19;
}
.button-start{
z-index: 10;
position: absolute;
}
.starClip {
background-color: rgba(0, 0, 0, 0.186);
box-shadow: 0.5vh 0.5vh 1.3vh rgba(0, 0, 0, 0.1), inset 0.5vh 0.5vh 2vh rgba(0, 0, 0, 0.1) ;
height: 20vh;
width: 20vh;
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
-webkit-clip-path: url(#starClip);
clip-path: url(#starClip);
z-index: 15;
}