我尝试在Reaction中使用一个条件，如果大于1，则显示空格，如果等于1，则显示空格。我以这种方式编写代码，但它不起作用。请帮帮我。

import React from "react";

const AppointmentService = ({ service }) => {
  const { name, slots } = service;
  return (
    <div>
      <div className="card lg:max-w-lg bg-base-100 shadow-xl">
        <div className="card-body">
          <h2 className="card-title">{name}</h2>
          <p>
            {slots.length}
            <>{slots.length == 1 ? "space available" : "spaces available"}</>
          </p>
          <div className="card-actions justify-end">
            <button className="btn btn-primary">Buy Now</button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AppointmentService;