I have 2 Astro Components

Parent.astro and Child.Astro

where I want to pass props to Child Astro file within a loop

tried this way

Parent.astro

---
import Letter from "./Child.astro";


type Props =  {
  title: string;
  list: string[];
}

const { title, list} = Astro.props;

---

  <div class="container">
    <h1>{title}</h1>
    <div >
      <!--theis doesn't works-->
      {list.map((item) =>  <Child entity={item}></Child> )}
      <!--below works-->
      {list.map((item) =>  <p>{item}</p> )}
    </div>
</div>

Child.Astro

---
type Props = {
  letter: string;
  code: string | number;
}

const {letter, code} = Astro.props

---
<div class="letterClass" >
  <p>{letter}</p>
  <p id="tgt">{code}</p>
</div>

but it is not working when passing <Child> inside map. what am I missing here?

while calling <Alphabet list={['a','b']}> from other component

or can we use <Slot/> inside .map

{list.map((item) => <Slot> )} ?