Reactivity when passing props down not reactive on nested component

                  
export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)
  // create effect stuff

  return level()?.placements.map((placement) => {
    const [x, y] = placement.displayXY()

    return (
        <div
            style={{
              position: 'absolute',
              transform: `translate3d(${x}px, ${y}px, 0px`,
            }
            }>
          {placement.renderComponent()}
        </div>
    )
  }
}

export default function ParentComponent(props) {
  // signal stuff
  const [level, setLevel] = createSignal(...)

  // create effect stuff

  return(
   <ChildComponent level={level()} />
  )
}

export default function ChildComponent(props) {
  return (
      <For each={props.level.placements}>
        {(placement) => {
          const [x, y] = placement.displayXY()

          return (
            <div
              style={{
                position: 'absolute',
                transform: `translate3d(${x}px, ${y}px, 0)`,
              }}
            >
              {placement.renderComponent()}
            </div>
          )
        }}
      </For>
  )
}