Passing props via spread operator in React

Using React I have a component that I need to pass an ‘id’ prop to render an id on the html anchor. Starting at the lowest return level for this anchor point and working up we have:

// links.jsx
export const myLink = ({children, location, ...props}) => {
  const href = "mydomain.com" + location;
  return (
    <a href={href} {...props}>{children}</a>
  )
}

//components.jsx
export const Block = ({linkLocation, htmlId, children, externalLink: isExternalLink}) => {
  const EditLink = isExternalLink ? Link1 : Link2;
  return <div className="outer-div">
    <div className="inner-div">
      {children}
    </div>
 
    <EditLink location={editLocation} id={htmlId}>{translate('edit')}</EditLink>
  </div>
}

export const Summary = ({info1, info2, info3}) => {
  return <SummaryBlock htmlId={'i-am-id-' + info2}>
    <div>{info1}</div>
    <div>{info2}</div>
    <div>{info3}</div>
  </SummaryBlock>
}

That htmlId is what I’m seeking to pass up to myLink to assign the anchor’s id attribute yet on page render it doesn’t appear. Is it because id’s are protected/special? Do I need to assign the spread operator on props to the EditLink component? Am I missing a passing point somewhere? I’m especially confused because similar questions show the spread operator as being just the right thing to do what I’m seeking.

Guidance would be much appreciated!