organizations.tsx

const { data, isLoading } = useOrganizations();
  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
    createdOn: false,
    updatedOn: false,
  });

  const navigate = useNavigate();
  const { id } = useParams();
  const rowSelection = useRowSelection();
  const statusFilter = useStatus();
  const {
    updateRowSelection,
    addOrganization,
  } = useOrganizationActions();
  const { pathname } = useLocation();
  const selectedRow = Object.keys(rowSelection).at(0);

  const showDetail = useCallback(
    (id: string) => {
      addOrganization(id);
      navigate(`detail/${id}/${currentTab}`, { replace: true });
      updateRowSelection({ [id]: true });
    },
    [addOrganization, currentTab, navigate, updateRowSelection],
  );

  useEffect(() => {
    if (id) {
      addOrganization(id);
      updateRowSelection({ [id]: true });
    }

    if (!isLoading && data?.length) {
      const firstRow = data.at(0);

      if (!id && !selectedRow && firstRow) {
        showDetail(firstRow.id);
      }

      if (!id && selectedRow && pathname === '/organizations') {
        showDetail(selectedRow);
      }

      if (!id && !selectedRow) {
        const firstRow = data.sort((a, b) => b.createdOn - a.createdOn).at(0);
        showDetail(firstRow?.id ?? '');
      }
    }
  }, [
    isLoading,
    data,
    addOrganization,
    updateRowSelection,
    showDetail,
    id,
    selectedRow,
    pathname,
  ]);