useContext triggers rerendering without changes

Question

I have following react-component:

type Props = {
    country: string;
    electricityValues: number[];
    activeStep: number;
    setActiveStep: React.Dispatch<React.SetStateAction<number>>;
}

const EmissionsMemoized = (props: Props) => {
    const {country, electricityValues, activeStep, setActiveStep} = props;

    useEffect(() => {
        //make api call
    }, [electricityValues]);

    return (
        <>
            //...
        </>
    );
}

To avoid unnecessary rerender, I have memoized it like following:

export default function Emissions() {
    const {country, electricityValues, activeStep, setActiveStep} = useContext(AppContext);
    return useMemo(() => (<EmissionsMemoized country={country} electricityValues={electricityValues} activeStep={activeStep} setActiveStep={setActiveStep} />), []);
}

The component is being served in a Stepper-Component:

function getStepContent(step: number) {
    switch (step) {
//...
        case 2:
            return <Emissions />;
//...
    }
}

Unfortunately, useEffect() is getting triggered, making an API-call every time the Emissions-component is being returned by getStepContent(), regardless if state actually changed.

Any idea how to make useEffect() trigger only if value of electricityValues-array changes?

Is it because useContext() is returning a new reference every time?