Уrror performing calculation in JSX

Question

I have a problem in the code below.. Errors occur when calling the maskOfPopulation function, I don't know why.

The field population get number that convert to string by maskOfPopulation.

const Country = ({ countries }) => {
    const maskOfPopulation = (population) => {
        return population
            .toString()
            .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
    };

    return (
        <ul className={styles.list__container}>
            {countries.map(({ id, name, capital, media, population }) => (
                <li className={styles.list__item} key={id}>
                    <Link to='/'>
                        <img className={styles.country__flag} src={media.flag} alt="" />
                        <div className={styles.country__content}>
                            <h2 className={styles.country__name}>{name}</h2>
                            <div className={styles.country__capital}>Capital: <span>{capital}</span></div>
                            <div className={styles.country__population}>Population: <span>{maskOfPopulation(population)}</span></div>
                        </div>
                    </Link>
                </li>
            ))}
        </ul>
    );
}