Доработать логику компонента react

import React, { useState, useEffect } from "react";
import axios from "axios";
import {
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableCell,
    IconButton,
    Grid
} from "@mui/material";
import ShowIcon from "@mui/icons-material/Visibility";
import HideIcon from "@mui/icons-material/VisibilityOff";

const api = "https://6214040289fad53b1f087530.mockapi.io/api/users/";

/**
 * получить данные по users
 * сохранить данные в локальное состояние users
 * user - { name: string, email: string, phoneNumber: string, id: string }
 * реализовать логику маскирования/отображения телефонного номера по нажатию на иконку
 * маскирование телефона
 * input: 89213642122
 * output: 8921*****22
 */

export function TableWithMasking() {

    return (
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>Имя</TableCell>
                    <TableCell>Email</TableCell>
                    <TableCell>Телефон</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
            </TableBody>
        </Table>
    );
}