---

const PluralChoiceListItemComponent: FC<PluralChoiceListItemProps> = memo(
  ({ v, fontSize }) => {
    const sortedValues = [...v.value].sort((a, b) =>
      a.name.localeCompare(b.name),
    );
    return (
    <>
      {v.value ? (
        <ul
          style={{
            paddingLeft: 20,
            margin: 0,
            listStyle: "disc",
            color: "#263238",
          }}
        >
          {sortedValues.map((x) => (
            <li key={x.id}>
              <Typography sx={{ fontSize, color: "#263238" }}>
                {x.name}
              </Typography>
            </li>
          ))}
        </ul>
      ) : (
        <>-</>
      )}
    </>
    )
  )
  }
);