Getting this strange issue where when I try to add multiple Links to my Container component, and unwrap a graphql response to obtain an id, the scroll position for those n > 1 Links breaks, going back to the top of the page on "back".

const Container = ({ item }) => {
  return (
    <div>
      <div>
        <Link href={`/items/${item.id}`} scroll={true}> <!-- WORKS -->
          {item.name}
        </Link>
      </div>
      <div>
        <Parent item={item} />
      </div>
    </div>
  )
}

const Parent = ({ item }) => {
  return (
    {item?.collection?.items.edges.map((edge) => (
      <div>
        <Child item={edge.node} />
      </div>
    )}
  )
}

const Child = ({ item }) => {
  const id = item.id
  const fakeId = 123

  return(
        <Link
          href={`/items/${item.id}`} <!-- BREAKS -->
          href={`/items/${id}`} <!-- BREAKS -->
          href={`/items/123`} <!-- WORKS -->
          href={`/items/${fakeId}`} <!-- WORKS -->
          scroll={true}
        >
        <div>
          {item.name}
        </div>
      </Link>
    )
}