useEffect fires and print statements run but no actual axios.post call runs reactjs

I have a useEffect function that is firing due to yearsBackSettings changing and the console.log statements inside useEffect fire too:

useEffect(() => {
    console.log("something changed")
    console.log(yearsBackSettings)
    if (userId) {
      const user_profile_api_url = BASE_URL + '/users/' + userId
      const request_data = {
        searches: recentSearches,
        display_settings: displaySettings,
        years_back_settings: yearsBackSettings
      }

      console.log("running user POST")
      console.log(request_data)

      axios.post(user_profile_api_url, request_data)
        .then(response => {
          console.log("user POST response")
          console.log(response)
        })
    }


  }, [recentSearches, displaySettings, yearsBackSettings])

As the image shows, changing yearsBackSettings causes this to run, which SHOULD make a post request with all the new settings:

However, for some reason there is nothing happening on the server except the stock search running:

the last updated time for stock ibm before save: 08/25/2022 08:13:30
stock was updated within the last 5 minutes...no need to make an api call
the last updated time for stock ibm after save: 08/25/2022 08:13:30
[25/Aug/2022 08:17:25] "POST /users/114260670592402026255 HTTP/1.1" 200 9
[25/Aug/2022 08:17:25] "GET /dividends/ibm/3/5 HTTP/1.1" 200 4055
the last updated time for stock ibm before save: 08/25/2022 08:13:30
stock was updated within the last 5 minutes...no need to make an api call
the last updated time for stock ibm after save: 08/25/2022 08:13:30
[25/Aug/2022 08:17:26] "GET /dividends/ibm/27/5 HTTP/1.1" 200 8271
the last updated time for stock ibm before save: 08/25/2022 08:13:30
stock was updated within the last 5 minutes...no need to make an api call
the last updated time for stock ibm after save: 08/25/2022 08:13:30
[25/Aug/2022 08:18:11] "GET /dividends/ibm/27/70 HTTP/1.1" 200 14734

The post to users there was an initial one when users loaded. If I sign in and sign out I lose the 70 years in the second component:

When I log out and log in it shows 27 years and 5 years, I lose the 70 because the /users POST didn't run

I have the following React main component

import React, {useState, useEffect} from 'react';
import { connect } from 'react-redux';

import axios from 'axios';


const SearchPage = ({userId}) => {

  const [recentSearches, setRecentSearches] = useState([DEFAULT_STOCK]);
  const [dividendsYearsBack, setDividendsYearsBack] = useState('3');
  const [debouncedDividendYearsBack, setDebouncedDividendYearsBack] = useState('3');
  const [earningsYearsBack, setEarningsYearsBack] = useState('5');
  const [debouncedEarningsYearsBack, setDebouncedEarningsYearsBack] = useState('5');
  const [errorMessage, setErrorMessage] = useState('');

  )
  const [displaySettings, setDisplaySettings] = useState([
      {setting_name: 'showYieldChange', visible: true},
      {setting_name: 'showAllDividends', visible: true},
      {setting_name: 'showAllEarnings', visible: true},
  ])
  const [yearsBackSettings, setYearsBackSettings] = useState([
      {section: 'dividendsYearsBack', years_back: 3},
      {section: 'earningsYearsBack', years_back: 5}
  ])

  const onTermUpdate = (term) => {
    const trimmed = term.trim()
    setTerm(trimmed);
  }

  debounceTerm(setDebouncedTerm, term, 1500);
  debounceTerm(setDebouncedDividendYearsBack, dividendsYearsBack, 1500);
  debounceTerm(setDebouncedEarningsYearsBack, earningsYearsBack, 1500);

  useEffect(() => {runSearch()}, [debouncedTerm]);

  useEffect(() => {
    // alert(dividendsYearsBack)
    if (dividendsYearsBack !== '' && earningsYearsBack !== '') {
      runSearch();
    }
  }, [debouncedDividendYearsBack, debouncedEarningsYearsBack])

  useEffect(() => {
    const yearsSettingsCopy = Object.assign(yearsBackSettings);
    const dividendsYearsBackSetting = yearsSettingsCopy.find((dict) => dict.section == 'dividendsYearsBack');
    dividendsYearsBackSetting.years_back = dividendsYearsBack;
    const earningsYearsBackSetting = yearsSettingsCopy.find((dict) => dict.section == 'earningsYearsBack');
    earningsYearsBackSetting.years_back = earningsYearsBack;
    setYearsBackSettings(yearsSettingsCopy);

  }, [dividendsYearsBack, earningsYearsBack])

  useEffect(() => {
    const dividendsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'dividendsYearsBack');
    setDividendsYearsBack(dividendsYearsBackSetting.years_back);
    const earningsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'earningsYearsBack');
    setEarningsYearsBack(earningsYearsBackSetting.years_back);
  }, [yearsBackSettings])

  useEffect(() => {
    console.log("user id changed")
    if (userId) {
      const user_profile_api_url = BASE_URL + '/users/' + userId
      axios.get(user_profile_api_url, {})
        .then(response => {
          // console.log(response)

          const recent_searches_response = response.data.searches;
          const new_recent_searches = [];
          recent_searches_response.map(dict => {
            new_recent_searches.push(dict.search_term)
          })
          setRecentSearches(new_recent_searches);
          setDisplaySettings(response.data.display_settings);
          setYearsBackSettings(response.data.years_back_settings);

        })
        .catch((error) => {
          console.log("error in getting user profile: ", error.message)
        })
    }
  }, [userId])

  useEffect(() => {
    console.log("something changed")
    console.log(yearsBackSettings)
    if (userId) {
      const user_profile_api_url = BASE_URL + '/users/' + userId
      const request_data = {
        searches: recentSearches,
        display_settings: displaySettings,
        years_back_settings: yearsBackSettings
      }

      console.log("running user POST")
      console.log(request_data)

      axios.post(user_profile_api_url, request_data)
        .then(response => {
          console.log("user POST response")
          console.log(response)
        })
    }


  }, [recentSearches, displaySettings, yearsBackSettings])



  return (

      <div className="ui segment">
        {renderMainContent()}
      </div>
    </div>
  )
}


const mapStateToProps = state => {
  return { userId: state.auth.userId };
};

export default connect(
  mapStateToProps
)(SearchPage);

// export default SearchPage;

The yearsBackSettings is showing up changed to 27 and 70 (from the picture) but the POST request doesn't fire. How can I get these settings to save when the settings change?

The issue is that the post doesnt run when I update the years back settings:

  useEffect(() => {
    console.log("running user profile post");
    const user_profile_api_url = BASE_URL + '/users/' + userId
    const request_data = {
      searches: recentSearches,
      display_settings: displaySettings,
      years_back_settings: yearsBackSettings
    }

    axios.post(user_profile_api_url, request_data)
      .then(response => {
        console.log(response)
      })

  }, [recentSearches, displaySettings, yearsBackSettings])

this doesnt run when yearsBackSettings changes. I am logging yearsBackSettings to console and it is certainly changed, but the post request to user profile doesnt fire

I think the issue is here:

  useEffect((

) => {
    const dividendsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'dividendsYearsBack');
    dividendsYearsBackSetting.years_back = dividendsYearsBack;
    const earningsYearsBackSetting = yearsBackSettings.find((dict) => dict.section == 'earningsYearsBack');
    earningsYearsBackSetting.years_back = earningsYearsBack;
    setYearsBackSettings(yearsBackSettings);

  }, [dividendsYearsBack, earningsYearsBack])

as an example, I tried doing any useEffect with yearsBackSettings, and it never works. I have changed the settings a few times and the alert does not fire:

useEffect(() => {
    alert("years back settings changed")
  }, [yearsBackSettings])