I’m trying to put a react component into a svg and I did it but the items (elements) of the component are overflowing out of the svg path boundries.

I want the svg path boundaries to not overflow the react component out of its boundaries.
here is the code –

<svg className=" responsive-svg" viewBox="0 0 1410 867" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
                            <defs>
                                <clipPath id="clip-path">
                                    <path d="M1314.77 0.862305C1300.15 0.862305 1288.31 19.06545 1288.31 41.9884V79.2315C1288.31 101.1545 1276.46 118.92645 1261.84 118.92645H26.7689C12.1537 118.92645 0.305664 136.99845 0.305664 158.622V402.5625C0.305664 424.185 12.1537 442.257 26.769 442.257H52.2516C66.8668 442.257 78.7148 460.329 78.7148 481.9525V535.257V649.746V826.2435C78.7148 847.867 90.5628 865.939 105.178 865.939H1097.03C1111.65 865.939 1123.5 847.867 1123.5 826.2435V729.1365C1123.5 707.513 1135.35 689.441 1149.96 689.441H1381.84C1396.46 689.441 1408.31 671.369 1408.31 649.746V409.9515C1408.31 409.9395 1408.31 409.926 1408.31 409.914C1408.3 407.478 1408.3 405.036 1408.31 402.6C1408.31 402.588 1408.31 402.576 1408.31 402.5625V230.0625V158.622V41.9884C1408.31 19.06545 1396.46 0.862305 1381.84 0.862305H1314.77Z" fill="white" />

                                </clipPath>
                            </defs>
                            <path d="M1314.77 0.862305C1300.15 0.862305 1288.31 19.06545 1288.31 41.9884V79.2315C1288.31 101.1545 1276.46 118.92645 1261.84 118.92645H26.7689C12.1537 118.92645 0.305664 136.99845 0.305664 158.622V402.5625C0.305664 424.185 12.1537 442.257 26.769 442.257H52.2516C66.8668 442.257 78.7148 460.329 78.7148 481.9525V535.257V649.746V826.2435C78.7148 847.867 90.5628 865.939 105.178 865.939H1097.03C1111.65 865.939 1123.5 847.867 1123.5 826.2435V729.1365C1123.5 707.513 1135.35 689.441 1149.96 689.441H1381.84C1396.46 689.441 1408.31 671.369 1408.31 649.746V409.9515C1408.31 409.9395 1408.31 409.926 1408.31 409.914C1408.3 407.478 1408.3 405.036 1408.31 402.6C1408.31 402.588 1408.31 402.576 1408.31 402.5625V230.0625V158.622V41.9884C1408.31 19.06545 1396.46 0.862305 1381.84 0.862305H1314.77Z" fill="white" />
                            <foreignObject x="50" y="50" width="200" height="200">
                                <Games />
                            </foreignObject> {/* <iframe width="854" height="480" src="https://www.youtube.com/embed/DsFQJfwzbqA" title="Align It New Promo Video - Nine Men's Morris | Morabaraba | Twelve Men's Morris | Mill | Board Game" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> */}
                            {/* <image href="https://cdn.prod.website-files.com/63c560228fad5afe6ddbe1a4/646f7b0e442d7e02b27f5d11_ctc-home-header.webp" x="0" y="0" height="578px" width="1408px" clipPath="url(#clip-path)" /> */}
                        </svg>```