This is an exercise from https://react.dev/learn/choosing-the-state-structure editable travel snack list. Why is React not allowing ternary operations on state variables. Could not find any specific reason.

import { useState } from 'react';
const itemslist=[
    { title: 'chips', id: 0 },
  { title: 'chocos', id: 1 },
  { title: 'biscuits', id: 2 },
];
export default function Picture() {
    const[snack, setSnack]=useState(-1);
    const[items, setItems] =useState(itemslist);
    function refactor(e){
    const x = e.target.getAttribute("name1");
     const  temp = items.map(({title, id})=>({
           title : ((id === x) ? e.target.value : title),
           id:id,
       }));
        setItems(temp);
    }
    
    return(
        <>
            <p>Whats ur travel snack:</p>
            <ul>
                {
                    items.map( item =>(
                        <li id={item.id}><textarea name1={item.id} value={item.title} onChange={refactor}></textarea><button onClick={()=>setSnack(item.id)}>Select</button><br></br></li>
                    )          
                    )
                }
            </ul>
            <br></br>
            <p>Your travel snack is : {snack>=0 && (items.filter(it=>it.id===snack))[0].title}</p>
        </>
    )
}

Any reason behind this behavior of not re-rendering?