Here is the reducer -

const reducer = produce((draft: State = initialState, action: actions.CompanyTypes) => {

  if (action.type === 'SELECT_COUNTRY') {
    draft.countryName = action.payload.countryName;
  }

  if (action.type === 'CHANGE_SELECTION') {

    const countriesData = transformData(countries)

    draft.countriesData = countriesData;
  }
});

I'm using a packege called react-simple-map here is where I'm dispatching -

                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  onMouseEnter={() => {
                    const countryName = geo.properties.NAME;
                    dispatch({type: SELECT_COUNTRY, payload: { countryName }});
                  }}
                  onMouseLeave={() => {
                    dispatch({type: SELECT_COUNTRY, payload: {countryName: ""}});
                  }}
                  style={{
                    default: {
                      fill: countriesState!.countriesData[geo.properties.NAME]?.opacity ? "#34047d" : "#b9b9bd",
                      outline: "none",
                      opacity: Number(countriesState!.countriesData[geo.properties.NAME]?.opacity) + '%',
                    },
                    hover: {
                      fill: "#34047d",
                      outline: "none",
                    },
                  }}
                />

Here when I'm changing the state I don't get anything -

const MapView: React.FC<Props> = (props: React.PropsWithChildren<Props>) => {
  const [ countriesState, dispatch ] = useReducer(reducer, initialState);

  console.log(countriesState!.countryName);

  return (
    
  );
};

Why is that? Would love to here a solution.