To save changes made by the **DataGrid Toolbar Column Chooser** (`<GridToolbarColumnsButton />`) to a temporary Excel file each time the visibility of columns changes, you can use the `onColumnVisibilityModelChange` event of the MUI `DataGrid`. This event triggers whenever column visibility changes, allowing you to update the temp file based on visible columns.

Here's a step-by-step guide on implementing this:

### 1. Add `onColumnVisibilityModelChange` Event to `DataGrid`

Attach `onColumnVisibilityModelChange` to listen for column visibility changes. When triggered, this event can be used to filter the data based on the visible columns, generate a temporary Excel file (`tempFile`), and save it.

### 2. Filter Data Based on Visible Columns and Export to Excel

With `xlsx`, filter only the visible columns and write them to a temporary file each time the visibility model changes.

### Code Implementation

```javascript
import React, { useState } from 'react';
import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton } from '@mui/x-data-grid';
import XLSX from 'xlsx';

const ExampleDataGrid = () => {
  const [tableData, setTableData] = useState([
    { id: 1, nom: 'sakalava', prenom: 'gagag', age: 25 },
    { id: 2, nom: 'wild', prenom: 'fire', age: 30 },
  ]);

  const [columnVisibilityModel, setColumnVisibilityModel] = useState({
    nom: true,
    prenom: true,
    age: true,
  });

  const columns = [
    { field: 'nom', headerName: 'Nom', width: 200 },
    { field: 'prenom', headerName: 'Prenom', width: 200 },
    { field: 'age', headerName: 'Age', width: 100 },
  ];

  // Handle column visibility changes
  const handleColumnVisibilityChange = (newModel) => {
    setColumnVisibilityModel(newModel);
    updateTempFile(newModel);
  };

  // Update temp file based on visible columns
  const updateTempFile = (visibilityModel) => {
    const visibleColumns = columns
      .filter((col) => visibilityModel[col.field])
      .map((col) => col.field);

    // Filter data based on visible columns
    const filteredData = tableData.map((row) => {
      const filteredRow = {};
      visibleColumns.forEach((col) => {
        filteredRow[col] = row[col];
      });
      return filteredRow;
    });

    // Create a new worksheet and workbook
    const worksheet = XLSX.utils.json_to_sheet(filteredData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

    // Write to a temporary file (Blob)
    const tempFile = XLSX.write(workbook, { bookType: 'xlsx', type: 'blob' });

    // Send tempFile to backend or save locally
    console.log('Temporary file updated', tempFile);
  };

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={tableData}
        columns={columns}
        columnVisibilityModel={columnVisibilityModel}
        onColumnVisibilityModelChange={handleColumnVisibilityChange}
        components={{
          Toolbar: () => (
            <GridToolbarContainer>
              <GridToolbarColumnsButton />
            </GridToolbarContainer>
          ),
        }}
      />
    </div>
  );
};

export default ExampleDataGrid;
```

### Explanation

1. **Event Listener**: `onColumnVisibilityModelChange` listens for visibility changes and updates `columnVisibilityModel`.
2. **Filtering Visible Columns**: `updateTempFile` uses `columnVisibilityModel` to filter `tableData` for only the visible columns.
3. **Writing to Excel**: The filtered data is written to a new workbook (`tempFile`) as an Excel file, which can be sent to the backend or saved locally.

### Optional: Trigger Backend Upload

To upload `tempFile` to your backend, use `FormData` and an `axios` POST request in `updateTempFile`. This ensures the temporary Excel file is updated on each column change event.
