i have working code and little problem with if statement in map function here is code

    const SortableItem = SortableElement(CashItem);

const SortableList = SortableContainer(({items}) => {

  return (

    <div>

      {items.map((cashitem, index) => (

        <SortableItem key={`item-${index}`} 

          index={index} 

          isPayed={cashitem.isPayed}

          date={cashitem.date}

          name={cashitem.name}

          realisticVal={cashitem.realisticVal}

          realisticBalance={cashitem.realisticBalance}

          optimisticBalance={cashitem.optimisticBalance}

          optimisticVal={cashitem.optimisticVal}

          changedName={(event) => this.nameChangedHandler(event, cashitem.id)} 

          isBlocked={(event) => this.handleChangeCheckbox(event, cashitem.id)} 

          delete={(event) => this.removeItem(event, cashitem.id)} 

          addNext={(event) => this.addNext(event, cashitem)} 

          realisticChange={(event) => this.realisticBalanceChangedHandler(event, cashitem.id)}  

          optimisticChange={(event) => this.optimisticBalanceChangedHandler(event, cashitem.id)}  

          dateChangedHandler={(event) => this.dateChangedHandler(event, cashitem.id)}

         />

      ))}

    </div>

  );

});

now i want chceck if statement to render only when in map cashitem has state is visible cashitems isVisible already have isVisible:true or false i want to do something like that

 const SortableItem = SortableElement(CashItem);

const SortableList = SortableContainer(({items}) => {

  return (

    <div>

      {items.map((cashitem, index) => (

        if(cashitem.isVisible===true){

          <SortableItem key={`item-${index}`} 

          index={index} 

          isPayed={cashitem.isPayed}

          date={cashitem.date}

          name={cashitem.name}

          realisticVal={cashitem.realisticVal}

          realisticBalance={cashitem.realisticBalance}

          optimisticBalance={cashitem.optimisticBalance}

          optimisticVal={cashitem.optimisticVal}

          changedName={(event) => this.nameChangedHandler(event, cashitem.id)} 

          isBlocked={(event) => this.handleChangeCheckbox(event, cashitem.id)} 

          delete={(event) => this.removeItem(event, cashitem.id)} 

          addNext={(event) => this.addNext(event, cashitem)} 

          realisticChange={(event) => this.realisticBalanceChangedHandler(event, cashitem.id)}  

          optimisticChange={(event) => this.optimisticBalanceChangedHandler(event, cashitem.id)}  

          dateChangedHandler={(event) => this.dateChangedHandler(event, cashitem.id)}

         />

        }



      ))}

    </div>

  );

});