display Number of page in React Js using material-ui Pagination

look at the code below in my App.js Component:

const App = () => {
  const [workstations, setWorkstations] = useState([]);
  let [page, setPage] = useState(1);
  const PER_PAGE = 1;

 useEffect(() => {
    loadWorkstations();
  }, []);

  const loadWorkstations = async () => {
    const request = await getWorkstations();
    const result = request.data;
    setWorkstations(result);
  };

 const count = Math.ceil(workstations.length / PER_PAGE);
  const _DATA = usePagination(workstations, PER_PAGE);

  const handleChange = (e, p) => {
    setPage(p);
    _DATA.jump(p);
  };

return (
 <Pagination
          count={count}
          size="large"
          page={page}
          variant="outlined"
          color="primary"
          onChange={handleChange}
        />
);
};

now the result that i got form this implementation is like this :

but what im looking for should be look like this :

i mean i don't want to see all my pages on the UI and show the rest with "..."

Note: im using @material-ui/lab