React: how to render a certain component if the output from the .map method matches a certain value

I have the following situation. In which I have two components a Querytable(parent) component and a MyPop(child) component. Currently the .map method seen below in the querytable component returns the following values in the dashboard, defined with the blue chunks. i would like to insert a function in the MyPop component in which i render a new component named TileLine if from the querytable the botContainsElement url matches http://linkedbuildingdata.net/ifc/resources20201208_005325/TemperatureSensor_11NR008TE_001TRL.

On the other hand if the value from the .map method matches the following link http://linkedbuildingdata.net/ifc/resources20201208_005325/OccupacySensor_11NR008LT_001PIRTM. Then MyPop should render a TileBar component. if any other link is show it should'nt render anything at all.

const QueryTable = ({guidList}) => {
 const { context, setContext } = useContext(AppContext);        
   return (
      <div>
      
   QueryTable 
    <tbody>
    {guidList && guidList.length > 0 && guidList.map((myguids, key) => {
        const url = myguids.p
        var arr = url.split('/')[3];
        return (
            <tr key={key}>
                 <td>{arr}: {myguids.guid.includes('http://linkedbuildingdata.net/ifc/resources20201208_005325/') ? <MyPopUp myproperties={guidList} myguidnames={myguids.guid}>{myguids.guid}</MyPopUp> : myguids.guid}</td>
            </tr>
        )
        })}
    </tbody>
</div>

and this is the MyPop component:

const MyPopUp = ({myguidnames, myproperties}) => {
const [open, setOpen] = useState(false)
const { context, setContext } = useContext(AppContext);
    console.log("myguidnames",myguidnames)
    console.log("myproperties",myproperties)


  // TODO: Check if the value coming from myguidnames or myproperties matches a URL containing either a 
  // /TemperatureSensor_11NR008TE_001TRL or OccupancySensor_11NR008LT_001PIRTM  
  // if so render for the Temperature sensor the TileLine Component else if render the TileBar component  else render null. 


  // const Names = myguidnames && myguidnames.length > 0 && myguidnames.map((names, i) => {
  //     console.log(names, i)})

   const roomName = myproperties.map((name, i) => {
   // return <Header key={i}>{name.guid[3]}</Header>
   // return( console.log(name.guid))})

   const names = <p>{myguidnames}</p>

   return (
  <Modal
   onClose={()=> setOpen(false)}
   onOpen={()=> setOpen(true)}
   open={open}
   trigger={<Button>{names}</Button>}
    >
    <Modal.Header>You Just Opened up the {names} sensor</Modal.Header>
    <Modal.Content image>
        <Image size='medium' src='https://images.unsplash.com/photo-1603694681044-e71c5993d6cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80' wrapped/>
        <Modal.Description>
            <Header>My {roomName} Sensor Data </Header>
            {/* {names.includes('http://linkedbuildingdata.net/ifc/resources20201208_005325/TemperatureSensor_11NR008TE_001TRL') ? <TileLine/> : <TileBar/>} */}
                <TileBar>
                </TileBar>
            <p> some information can be displayed here</p>
        </Modal.Description>
    </Modal.Content>
    <Modal.Actions>
        <Button color='teal' onClick={()=> setOpen(false)}>Close</Button>
    </Modal.Actions>
</Modal>
export default MyPopUp