issue related to column hiding and expanding

[muskan-convivity]

issue:
I want to hide last two columns of a single row of my table when specific mobile screen size and after hiding i want a down arrow button which open accoridan and in accordian the hiding columns will be displayed. But it is not working properly when i refresh the app on mobile screen it is displaying all the columns

"use client";

import {
  ColumnDef,
  SortingState,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";

import Heading from "../headingcompo"

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import React, { useEffect } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}


export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [rowSelection, setRowSelection] = React.useState({});
  const [show, setShow] = React.useState(false);
  const [columnVisibility, setColumnVisibility] = React.useState({})

  const onChangeClick = () => {
    setColumnVisibility({ Classroom: false })
  }
  const onChangebackClick = () => {
    setColumnVisibility({ Classroom: true })
  }


  const [id, setId] = React.useState("");
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onRowSelectionChange: setRowSelection,
    onColumnVisibilityChange:setColumnVisibility,
    state: {
      sorting,
      rowSelection,
      columnVisibility,
    },
  });
  const myfun = (e) => {
    console.log("resize",e)
   
    if(window.innerWidth<700){
      e.preventDefault()
      console.log(window.innerWidth,"width")
    onChangeClick()}
    else if(window.innerWidth>700){
      onChangebackClick ()}
    
  }
  useEffect(() => {
    window.addEventListener("resize", myfun)
  })
  

  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </TableHead>
                );
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody >
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <>
              
                <TableRow
                
                className="relative "
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </TableCell>
                  ))}
                    <Button
                    className="hidden max-md:flex px-3  bg-white  text-black "
                    onClick={() => {
                      setId(row.id),setShow(!show)
                    }}
                  >
                    {show === false ? <ChevronDown /> : <ChevronUp />}
                  </Button>
                
                
                  
              
                  <div className={`${show === true ? "block" : "hidden"}`}>
                    {id === row.id ? (
                      <div className="flex gap-[14px] left-0 flex-col  border-[1px]">
                        <div>
                          <div>Classroom</div>
                        <div>{row.original.Classroom}</div>
                        </div>
                        <div>
                        <div>Enrolled</div>
                        <div>{row.original.Enrolled}</div>
                        </div>
                      </div>
                    ) : (
                      ""
                    )}
                  </div>
                </TableRow>
              

              </>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}

Expected Behaviour:
accoridian will work properly on my mobile screen

Thank You