How to place an image inside a SVG shape? [duplicate]

I have the following shape:

enter image description here

<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<rect width="64" height="52" rx="4.66667" transform="matrix(-1 0 0 1 64 0)" fill="white"/>
<path d="M15 52H29L15 64V52Z" fill="white"/>
</svg>

I am trying to put an image inside this shape but I don’t want the image to overflow. I’d like to get something like the image below but instead of red background I’d like it to be a real image:

enter image description here

I already tried a few things:

<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="cp">
    <use href="#thePath" />
  </clipPath>
  <rect width="64" height="52" rx="4.66667" transform="matrix(-1 0 0 1 64 0)" fill="white" />
  <image clip-path="url(#cp)" href={avatar} width="64" x="0" y="0" />
  <path d="M15 52H29L15 64V52Z" fill="white" />
</svg>

but that gives me this:
enter image description here

Can you please help me figure it out?

Thanks!