children.forEach typescript problem

export interface PropsDl {
  children: JSX.Element;
}
const DescriptionList: Component<PropsDl> = (props) => {
  const c = children(() => props.children);

  createEffect(() => {
    c().forEach((item, i) => {
      if (i % 2 == 0) item.style = 'background-color:whitesmoke';
    });
  });

  return (
    <>
      <div class='dl'> {c()}</div>
    </>
  );
};

export interface PropsDl {
  children: JSX.Element;
}
const DescriptionList: Component<PropsDl> = (props) => {
  const c = children(() => props.children);

  createEffect(() => {
    c().forEach((item, i) => {
      if (i % 2 == 0) item.style = 'background-color:whitesmoke';
    });
  });

  return (
    <>
      <div class='dl'> {c()}</div>
    </>
  );
};