Mudei a parte do admin/restaurantes em vez da listaRestaurantes rs

Entendi completamente diferente do que foi pedido, mas vou compartilhar o que eu fiz kkk Coloquei um select na parte de admin/restaurantes e somente quando seleciona o restaurante que aparece os botões de editar e deletar

import React, { useState } from "react"
import IRestaurante from "../../../../interfaces/IRestaurante"
import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, Button, MenuItem, InputLabel } from "@mui/material";
import Select, { SelectChangeEvent } from '@mui/material/Select';
import { useEffect } from 'react';
import { Link } from "react-router-dom";
import http from "../../../../http";

const AdministracaoRestaurantes = () => {
    const [restaurantes, setRestaurantes] = useState<IRestaurante[]>([]);

    useEffect(() => {
        http.get<IRestaurante[]>("restaurantes/")
            .then(resposta => setRestaurantes(resposta.data))
    }, [])

    const excluir = (restauranteASerExcluido: IRestaurante) => {
        http.delete(`restaurantes/${restauranteASerExcluido.id}/`)
            .then(() => {
                const novaLista = restaurantes.filter(restaurante => restaurante.id !== restauranteASerExcluido.id)
                setRestaurantes([...novaLista])
            })
    }

    const [select, setSelect] = React.useState('');
    const [restauranteSelecionado, setRestauranteSelecionado] = useState({id: 1})


    const handleChange = (event: SelectChangeEvent) => {
        setSelect(event.target.value as string)
    }

    const selecionarRestaurante = (rest: IRestaurante) => {
        setRestauranteSelecionado(rest)
    }

    const testando = restaurantes.filter(item => {
        const itemSelecionado = item.id === restauranteSelecionado.id
        return itemSelecionado
    })

    return (
        <>

            <TableContainer component={Paper}>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell>
                                <InputLabel id="demo-simple-select-label">Restaurante</InputLabel>
                                <Select
                                    labelId="demo-simple-select-label"
                                    id="demo-simple-select"
                                    value={select}
                                    label="Restaurante"
                                    sx={{ width: "300px" }}
                                    onChange={handleChange}
                                >
                                    {restaurantes.map((rest, index) => (
                                        <MenuItem
                                            key={index}
                                            value={rest.id}
                                            onClick={() => selecionarRestaurante(rest)}
                                        >
                                            {rest.nome}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </TableCell>
                            <TableCell>
                                {select !== '' && [<Link to={`/admin/restaurantes/${testando[0].id}`}>editar</Link>]}
                            </TableCell>
                            <TableCell>
                                {select !== '' && <Button variant="outlined" color="error" onClick={() => excluir(testando[0])}>Deletar</Button>}
                            </TableCell>
                        </TableRow>
                    </TableHead>
                </Table>
            </TableContainer>
        </>
    )
}

export default AdministracaoRestaurantes;

só esta dando um erro no console em negocio de key, nao consegui resolver o problema, acredito que é porque estou passando 2 key, e é isso, espero que gostem haha