Rendering a part of component through function in react JS

I am learning to reactJS,& stuck with a problem. I made a component with text (‘Online’) in it. I am receiving the status of Online as true/false from props. But I want to make a change in a part of the component (not the full component). Like here I want to change the color of the icon CircleFill used after the ‘online’ text.

I have written the code below but don’t know how to return that small segment?

import React,{useState} from 'react';
import { Row,Alert } from 'react-bootstrap';
import {BarChartFill, CircleFill } from 'react-bootstrap-icons';

const TitleHeadComponent = (props) => {

const [isNow, setisNow] = useState(props.isOnline);

function circleColor(isNow) {
    if(isNow === true) {
        //return  a circle of GREEN color after `Online :' below
    }
    else {
       //return  a circle of RED color after `Online :' below
    }
}

return (
    <Alert variant={'success'}>
     <Row className="followerRow">
         <BarChartFill size={26} color='black' /><br/><b>Online:{props.isOnline} </b>
         
        {/* if Online:true => <CircleFill color='green' />
        else if Online:false => <CircleFill color='red' /> */}
        

     </Row>
    </Alert>
 );
};

export default TitleHeadComponent;

Answer

Just update like this:

function circleColor(isNow) {
  if(isNow === true) {
      return <CircleFill color='green' />
  }
  else {
     return <CircleFill color='red' />
  }
}

return (
  <Alert variant={'success'}>
   <Row className="followerRow">
       <BarChartFill size={26} color='black' /><br/><b>Online:{props.isOnline} </b>
       
      {circleColor(props.isOnline)}
      

   </Row>
  </Alert>
);

or you can wite like this:

function circleColor(isNow) {
  return <CircleFill color={isNow ? 'green' : 'red'} />
}