刚接触react
为什么条件渲染不成功，不管warrantyChecked为true还是false，都显示。刚接触react

function Warranty(props) {
  const [warrantyChecked, setChecked] = useState(true);

  useEffect(() => {
    alert(`count发生变动，最新值为${warrantyChecked}`);
  }, [warrantyChecked])

  return (
    <div>
      <List className="warranty-list">
        <List.Item extra={<Switch name="switch" checked={warrantyChecked} onChange={()=> setChecked(!warrantyChecked)}/>} >服务<span className="list-des">(免费维修)</span></List.Item>
        { {warrantyChecked} &&
          <>
            <List.Item arrow="right" extra="共1件">商品</List.Item>
            <List.Item extra="1年">期限</List.Item>
            <List.Item extra="￥16.00">合计</List.Item>
          </>
        }
      </List>
    </div>
  );
}