Apply 'selected' class to first element in React component on page load

I have a 'RadioItem' component which applys a 'selected' class via an 'isChecked' boolean prop when it's clicked:

{categoryFilter.map((item) => {
  return (
    <RadioItem
      isChecked={selectedItem.id === item.id}
      key={item.id}
      itemName={item.name}
      itemPrice={item.price}
      onClick={() => clickHandler(item)}
    />
  );
})}

const RadioItem = (props) => {
  const clickHandler = () => {
    props.onClick();
  };

  return (
    <li
      className={props.isChecked ? "item selected" : "item"}
      onClick={clickHandler}
    >
      <div className="item__body">
        <div className="item__radio"></div>
        <h3 className="item__name">{props.itemName}</h3>
      </div>
      {props.itemPrice !== 0 && (
        <p className="item__price">£{props.itemPrice}</p>
      )}
    </li>
  );
};

I'd like to apply this 'selected' class to the first item (i.e. where the index is 0) when the page first loads but for it to then be deselected when another item is clicked. I have tried, for example, applying an OR condition to the isChecked, like this:

isChecked={selectedItem.id === item.id || index === 0}

but then of course the selected class persists on that first item regardless of me clicking other items.

Any help greatly appreciated, thanks.