useEffect on child component fires every other click - reactjs

Question

I have a "Zones" component that has a "heatmapConfig" useState. This state is passed via props to a HeatmapConfiguration component, inside which I want to have a useEffect hook that detects when an option changes (the option is basically a checkbox to turn an option on and off).
The parent component is:
export const Zones = () => {
const [heatmapConfig, setHeatmapConfig] = useState({active: false});
return (
<HeatmapConfiguration
state={heatmapConfig} setState=setHeatmapConfig} />
<Map>
{heatmapConfig.active && <HeatmapLeaflet {...{ mapRef, heatmapData, heatmapConfig }} />}
</Map>
)
}
Then the child is passed through the component and it's as follows:
export const HeatmapLeaflet = ({ mapRef, heatmapData, heatmapConfig }) => {
useEffect(()=>{
console.log(heatmapConfig);
},[heatmapConfig]);
}
When I click to turn on the option it logs {active: true}, but nothing is logged when I turn it off.
If I place the useEffect hook in the parent component, it obviously works as intended, logging each time the option is on and off, I just don't know how to make it work on the child component. Having the useEffect in the parent won't be good in case you suggest that change, since with that tons of other stuff must change.
The Map component is a leaflet map container and I think the only part relevant to this case is:
export const Map = ({ children }) => {
return(
{children}
)
}
EDIT:
Within the component I have two others which are working as expected (PerHourScatter and StopsScatter):
<Map>
{scatterplotConfig.active && <PerHourScatter {...{ scatterplotData, scatterplotConfig }} />}
{stopsScatterConfig.active && <StopsScatter {...{ stopsScatterData, stopsScatterConfig }} />}
{heatmapConfig.active && <HeatmapLeaflet {...{ mapRef, heatmapData, heatmapConfig }} />}
</Map>
By the comments I realize the difference is that the HeatmapLeaflet component doesn't actually render, it returns emtpy like this: return <></>;
I may have to follow a different approach, and maybe create this component not as a component but as a custom hook?
How do I solve this?