How to add a select option for appointment status. Where my status are scheduled,cancelled,ongoing. When i select scheduled only the scheduled appointments should be seen. I tried with compare, selector. But did not work. Please help

  const [appointments, setAppointments] = React.useState<Appointment[] | null>(null);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState('');
  const axios = useAxios();

  const gridRef = useRef(null);
  useEffect(() => {
    const getAppointments = async () => {
      try {
        const response = await axios.get(endpoint);
        const data = response.data['data'];
        const convertedAppointmentList = data.map((app: any) =>
          //convert data
        );
        setAppointments(convertedAppointmentList);
        setLoading(false);

        const grid = new Grid({
          columns: [
            'Name',
            'Phone',
            'Appointemnt Status',
          ],
          sort: true,
          search: true,
          data: convertedAppointmentList.map((app: Appointment) => [  
            app.name,
            app.phone,
            app.status,
            ),
          ]),
          pagination: { limit: 8 },
          language: {
            search: {
              placeholder: 'Search by Name, Phone Number',
            },
          },
        });

        if (gridRef.current) {
          grid.render(gridRef.current);
        }
      } catch (error) {
        //error
        setLoading(false);
      }
    };

    getAppointments();
  }, []);

  return (
    <div>
      <div ref={gridRef}></div>
    </div>
  );

I tried with compare, selector. But did not work. Please help