React - How can a DOM-Element that is passed by Parameter be manipulated?

Question

So let's imagine the following scenario:

const ExampleComponent = ({categories, item}:{categories: string,item:JSX.Element|JSX.Element[]}) => {

    return <div>
         <div>{categories}</div>
         <item/>
    </div>
}

Furthermore there is a place where this component is being used:

return <div>
    <ExampleComponent categories="a,b,c,d">
      <div>I want to be replaced with categories/use the categories parameter</div>
    </ExampleComponent>
    <ExampleComponent categories="e,f,g,h">
      <div>different div here</div>
      <div>I want to be replaced with categories/use the categories parameter</div>
    </ExampleComponent>
</div>

The ExampleComponent itself wants to use Categories, but there are also components in ExampleComponent's children that want to get in touch with Categories.

What options do I have now to use Categories? My initial idea was to give the place in the children an id and then use getElementById on it to replace the content, but I have often read that GetElementById is something that goes against the philosophies of ReactJS. Could someone provide a clarification why GetElementById is a bad idea and how the problem could be solved otherwise?