Expected behavior

Hello, how can I disable the button when I click

I have the next example, i have the next file main

import React, { useEffect } from 'react';
import {  MDBDataTable } from 'mdbreact';
import { useFetchInstituions } from '../../hooks/useFetchInstitutions';
import { useDispatch } from 'react-redux';
import { institutionSetActiveClear } from '../../actions/institution';

export const InstitutionScreen = () => {

    const dispatch = useDispatch();
    // Rename the name
    const { data_institutions:institutions } =  useFetchInstituions();

    const data = {
      columns: [
          {
            label: 'Nombre',
            field: 'nombre',
            sort: 'asc',
            width: 200,
          },
          {
            label: 'Direccion',
            field: 'direccion',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Nit',
            field: 'nit',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Telefono',
            field: 'telefono',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Celular',
            field: 'celular',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Imei',
            field: 'imei',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Nombre de Contacto',
            field: 'nombre_contacto',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Modificar',
            field: 'modified',
            sort: 'asc',
            width: 200
          },
          {
            label: 'Eliminar',
            field: 'deleted',
            sort: 'asc',
            width: 200
          },
      ],
      rows: institutions
    };

    useEffect( () => {

      dispatch( institutionSetActiveClear() );

    },[ dispatch ]);

    return (
        <div className="col-lg-12 animated fadeIn">
            <section className="panel">
                <header className="panel-heading">
                    Institutos
                </header>
                {
                  (data.rows !== [])
                  ?
                  <div className="panel-body">
                    <MDBDataTable
                        noRecordsFoundLabel="Cargando..."
                        scrollX
                        autoWidth={true}
                        maxHeight="40vh"
                        striped
                        bordered
                        small
                        data={ data }
                    />
                  </div>
                  :
                  <div className="panel-body">
                    <div>Cargando...</div>
                  </div>
                }
            </section>
        </div>
    )
}

to rescue the data create the file useFetchInstitutions.js

import Swal from 'sweetalert2';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { institutionLoaded, institutionSetActive } from '../actions/institution';
import { fetchConToken } from '../helpers/fetch';


export  const  useFetchInstituions = () =>{

    const dispatch = useDispatch();
    const [ uiDisabled, setUiDisabled] = useState( false )
    const history  = useHistory();

    const [ institutions, setInstitutions ] = useState({
        data_institutions:[]
    });
    const handleSwitchChange = () => {
        console.log( uiDisabled );
        setUiDisabled( true )
    };

    console.log( uiDisabled );

    useEffect(()=>{

        const fetchInstitution = () =>{

            fetchConToken( 'institutos/inst', 'GET' )
            .then(res => res.json())
            .then(json => {

                let rows = [];

                json.instituciones.forEach(item =>rows.push({
                    id_institucion:item.id_institucion,
                    nombre: item.nombre,
                    direccion: item.direccion,
                    celular: item.celular,
                    telefono: item.telefono ,
                    imei: item.imei,
                    nit: item.nit,
                    nombre_contacto:item.nombre_contacto,
                    modified: <button className="btn btn-primary" id= { item.id_institucion }  onClick= { ( e ) => { 
                        // It's a little more understandable
                        return(
                            dispatch( institutionLoaded(  json.instituciones ) ),
                            dispatch( institutionSetActive( json.instituciones, e.target.id  ) ),
                            history.push('/institution/update')
                        )
                    }}>Modificar</button>,
                    deleted: <button className="btn btn-success"  disabled={ uiDisabled } id= { item.id_institucion } 
                        onClick = { ( e ) => {
                            return (
                                handleSwitchChange(),
                                institutionDelete( e.target.id )  
                            )
                        }}
                    >Eliminar</button>
                }));
                setInstitutions( { data_institutions:rows });
            })
            .catch(err => console.error(err));

        }
        const institutionDelete = ( id_institucion ) => { 

            fetchConToken( 'institutos/delete', { 
                id_institucion
            }, 'DELETE')
            .then(res => {
                if (res.ok) { 
                    Swal.fire(':)','Institución Eliminada', 'success');
                    fetchInstitution();
                }
            })
            .catch(err => (
                console.error(err)),
            );
        };
        fetchInstitution();

        return () => {
            setInstitutions({ data_institutions:[] });
            setUiDisabled( false );
        }  

    },[ history, dispatch, uiDisabled ]);

    return institutions; 

}

at the moment of pressing the delete button it deletes the institution but does not change me the event disabled disable={ true }

I should change the event disabled, but I understood that the whole table needs to be redrawn

is there any way to change the status in the delete process to avoid too many button clicks