Single row selection not working

const columns = React.useMemo(
    () =>
      [
        columnHelper.display({
          size: 20,
          id: 'selectId',
          cell: info => (
            <Radio
              ref={radioRef}
              // uncheck the prevoiusly selected radio button when a new one is selected by the user using ref and onChange

              // checked={radioRef.current?.value === selectedStaffId}
              onChange={() => {
                setSelectedStaffId(info.row.original.id);
                if (radioRef.current) {
                  radioRef.current.checked = false;
                }
              }}
            />
          ),
        }),

        columnHelper.accessor('name', {
          size: 180,
          header: 'Name',
        }),
        columnHelper.accessor('deactivated', {
          size: 180,
          header: 'Status',
          cell: info => (
            <Badge capitalize color={!info.getValue() ? 'green' : 'yellow'}>
              {!info.getValue() ? 'Active' : 'Deactivated'}
            </Badge>
          ),
        }),

const table = useReactTable({
    data: staffs.data?.staff || [],
    columns,
    pageCount: staffs.data?.pagination.totalPages,
    state: { sorting },
    getCoreRowModel: getCoreRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    manualPagination: true,
    manualSorting: true,
  });