javascript – Chosen merchandise not exhibiting up

On the worth.map the talent label shouldn’t be exhibiting,have attempting each potential answer that I can consider, i even write textual content contained in the span however out of worth.map, it exhibits however the chosen merchandise shouldn’t be exhibiting up. I additionally strive console log it , it exhibits. Any assist we be appreciated

import React from 'react';
import model from './index.module.css'
import App from './App'
import { useState } from 'react';
import { useEffect } from 'react';
import { choices } from './information';

 
const Ability =()=>{
    const [isOpen, setIsOpen]=useState(false);
    const [highlightedIndex, setHighlightedIndex]=useState(0);
    const [value, setValue] = useState([options[0]]);
    const arrLenght = worth.size;

    

    const clearOption=()=>{
       onChange([]) ;
    }

    const isOptionSelected = (choice)=>{
         return  arrLenght > 1 ? worth.contains(choice)
         :  choice === worth;
    }

    const onChange =(o)=>{
        setValue([...value, o]);
    }

   useEffect (()=>{
     if (isOpen) setHighlightedIndex(0);
   },[isOpen])



    const selectOption= (choice)=>{

        if(worth.contains(choice)){
            onChange(worth.filter(o => o !== choice))
        }else {
            onChange( choice)
        }
    }
    
return (
    
 <div  onBlur={()=>setIsOpen(false) } 
     onClick={()=>setIsOpen(prev=> !prev)} tabIndex={0} 
      className={model.container} >
         
     <span className={model.worth}> 
         
     {
    
        worth.map((talent)=>{
            <button key={talent.worth} onClick={e => {e.stopPropagation(); selectOption(talent)}} className={model['option-badge']}>     
                   {talent.label }
                 {console.log(talent)}
                <span className={model['remove-btn']}>&instances;</span>
            </button>

        })  
        
 
    }
        
     
     </span>

     <button onClick={e =>{e.stopPropagation();  clearOption();} } 

         className={model['clear-btn']}>&instances;</button>

     <div className={model.divider}></div>
     <div className={model.caret}></div>
     <ul className={`${model.choices} ${isOpen ? model.present: ''}`}>
         
         {choices.map((choice, index)=>(

             <li  onClick={(e)=>{
                 e.stopPropagation();
                 selectOption(choice);
                 setIsOpen(false);
                 onChange(choice);
             }

             } key={choice.worth} 
             onMouseEnter={()=> setHighlightedIndex(index)}
             className={`${model.choice}  ${isOptionSelected(choice.label) ? model.chosen : model.unselect}
             ${index === highlightedIndex ? model.highlighted: ''}`}>
                 {choice.label}
             </li>
                 )
         )}
     </ul>
   
</div>
   )
}
 
export default Ability;

That is information.jsx that maintain the choices to be chosen

export const choices =[
    {label: 'first', value:1},
    {label: 'second', value:2},
    {label: 'third', value:3},
    {label: 'fouth', value:4},
    {label: 'fifth', value:5},
    {label: 'sixth', value:6}
  ];