For Loop always returning the last index in preact

Question

i want to create some pagination link and if we click on the link it should call the method with param from loop's index.

import {h} from 'preact';

const PageLink = (props) => {
    let totalPages = props.totalPages;
    let page = props.page;
    let link = [];
    let x = (indeks)=>{
        console.log(`yuhuuuuu ${indeks}`);
    }
    for(var i=1; i<=totalPages; i++){
        let pos = <li class="page-item"><a class="page-link" data-pos={i} href="" onClick={(e)=>{e.preventDefault();x(i)}}>{i}</a></li>
        link[i]=pos;
    }

    return (
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {link}
            </ul>
        </nav>
    )
}

export default PageLink

the link displayed as i want, but the problem x(i) always displaying the last i, what is the problem?