When you press the buttons, the language should change:

<a href="/" className={`bn5 ${i18next.language === LOCALES.UK ? 'disabled-link' : ''}`} onClick={handleUkrlanguage}>Ukrainian</a>
<a href="/" className={`bn5 ${i18next.language === LOCALES.EN ? 'disabled-link' : ''}`} onClick={handleEngLanguage}>English</a>

Changing the state of buttons via Redux is correct. This is confirmed by the output in console.log().
I think the problem is that i18next does not receive translations even after changing the language.

Below I will give you the code of the component and you will see the console.log() and their results.

import './header.css';
import gsap from 'gsap';
import React, { useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { ukrLanguage, engLanguage } from '../../redux/actions';
import i18next from 'i18next';
import { LOCALES } from '../i18n/constants';
import { Trans, useTranslation } from 'react-i18next';
import '../i18n/index';

const Header = () => {
  const heroRef = useRef(null);
  const { t } = useTranslation();
  const selectedLanguage = useSelector(state => state.language.selectedLanguage);

  useEffect(() => {
    const tl = gsap.timeline();
    tl.fromTo(heroRef.current, { x: -100, opacity: 0 }, { x: 0, opacity: 1, duration: 2 }, 1);
  }, []);


  useEffect(() => {
    console.log('Changing language to:', selectedLanguage);
    i18next.changeLanguage(selectedLanguage).then(() => {
      console.log('Language changed to:', i18next.language);
      console.log('Current translations:', i18next.getDataByLanguage(i18next.language));
      console.log('t("Welcome to React"):', t('Welcome to React'));
    }).catch(err => {
      console.error('Error changing language:', err);
    });
  }, [selectedLanguage]);

  const dispatch = useDispatch();
  const handleUkrlanguage = (event) => {
    event.preventDefault();
    console.log('Switching to Ukrainian');
    dispatch(ukrLanguage());
  }

  const handleEngLanguage = (event) => {
    event.preventDefault();
    console.log('Switching to English');
    dispatch(engLanguage());
  }
  console.log('Rendering Header with language:', i18next.language);
  console.log('Current translations in Header:', i18next.getDataByLanguage(i18next.language));
  console.log('t("Welcome to React") in render:', t('Welcome to React'));

  return (
    <header className='header'>
      <div className="container header__container">
        <div className="header__wrapper">
          <a href="#" className='header__hero' ref={heroRef}>
            <span className='header__surname'>My </span>
            <span className='first__name'>CV</span>
          </a>
          <div className="lng__btns-wrapper">
            <h3>{selectedLanguage}</h3>
            <a href="/" className={`bn5 ${i18next.language === LOCALES.UK ? 'disabled-link' : ''}`} onClick={handleUkrlanguage}>Ukrainian</a>
            <a href="/" className={`bn5 ${i18next.language === LOCALES.EN ? 'disabled-link' : ''}`} onClick={handleEngLanguage}>English</a>
            </div>
          <h3>{t('Welcome to React')}</h3>
          <h3><Trans>Welcome to React</Trans></h3>
        </div>
      </div>
    </header>
  );
}

export default Header;

I understand that there is a lot of code and I would be grateful if you could download the repository to your local computer and help me. I have been trying to solve the problem of why it does not translate text for a week: https://github.com/Bilostenko/cv_profile.git

Here what I receive:

Initializing i18next with resources: {en: {…}, uk: {…}}
index.js:31 i18next initialized with language: EN
index.js:32 Available resources: {en: {…}, uk: {…}}
Rendering App with language: EN
Header.jsx:46 Rendering Header with language: EN
**Header.jsx:47 Current translations in Header: undefined**
Header.jsx:48 t("Welcome to React") in render: Ласкаво просимо до React
Changing language to: UK
index.js:37 Language changed to: UK
**index.js:38 Current translations: undefined**
Header.jsx:26 Language changed to: UK
**Header.jsx:27 Current translations: undefined**
Header.jsx:28 t("Welcome to React"): Ласкаво просимо до React
Header.jsx:46 Rendering Header with language: UK
**Header.jsx:47 Current translations in Header: undefined**
Header.jsx:48 t("Welcome to React") in render: Ласкаво просимо до React