React pagination with dots - reactjs

Question

I create a react pagination component. Typical pagination logic, nothing especial, but I can not add dots logic, for example like this: < 1 2 ... 20 > when I could add the dots after certain page number and before last one. Also this dots element necessary to move while clicking forward like this: < 1 ... 5 6 ... 20 >
How to do it by right way?
export const Pagination = ({ newsList }) => {
const pageNumberLimit = 3;
const [posts, setPosts] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [maxPageLimit, setMaxPageLimit] = useState(4);
const [minPageLimit, setMinPageLimit] = useState(0);
const [postsPerPage] = useState(3);
const totalPosts = posts.length;
const lastPostIndex = currentPage * postsPerPage;
const firstPostIndex = lastPostIndex - postsPerPage;
const currentPost = posts.slice(firstPostIndex, lastPostIndex);
const paginate = (pageNumber) => setCurrentPage(pageNumber);
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
pageNumbers.push(i);
}
const prevPage = () => {
setCurrentPage((prev) => prev - 1);
};
const nextPage = () => {
setCurrentPage((prev) => prev + 1);
};
useEffect(() => {
const getPosts = () => {
setPosts(newsList);
};
getPosts();
}, []);
return (
<div className="paginationPerPage">
{currentPost.map() => (
<div className="card"/>
))}
<ul className="ctyledPageNumbers">
<button className="styledPageNumbersButton" onClick={prevPage} type="button" disabled={currentPage === pageNumbers[0]}>
‹ Anterior
</button>
{pageNumbers.map((number) => {
if (number >= maxPageLimit && number < pageNumbers.length) {
return (
<button onClick={nextPage} type="button">
…
</button>
);
}
return (
<li key={number} className={currentPage === number ? 'active' : null}>
<button type="button" onClick={() => paginate(number)}>
{number}
</button>
</li>
);
})}
<button className="styledPageNumbersButton"
onClick={nextPage}
type="button"
disabled={currentPage === pageNumbers[pageNumbers.length - 1]}
>
Seguinte ›
</button>
</ul>
</div>
);
};