I have problem with my theme. I’m making simple hide/show component in JS.

    const button = $('.button-hidden');

button.on('click', function (e) {

    let content = $(this).closest('.columns');
    let hiddenContent = content.next();

    hiddenContent.toggleClass('is-visible', 1000);

    if (hiddenContent.hasClass('is-visible')) {
        $(this).text(wp.read_less);
    } else {
        $(this).text(wp.read_more);
    }

   e.preventDefault();
});

I want to make my button text to be translatable from polylang “strings translate” menu. So I made something like this according to this post

    $wp_variables = [
    'read_more' => __('Read more'),
    'read_less' => __('Read less'),
];
wp_localize_script('main-js', 'wp', $wp_variables);

but nothing shows in my strings menu. I tried also register string first and then

        $wp_variables = [
    'read_more' => pll__('read_more'),
    'read_less' => pll__('read_less'),
];
wp_localize_script('main-js', 'wp', $wp_variables);

I can see this strings in my menu but on site there’s empty value. How can I make this proper?