Adsense served ads not changing inside react component

I'm having an issue with my adsense ad inside my react component, it will almost always display the same ad on route change. I suspect this is because Google sees the route as an empty page and so would not serve personalized ads.

What I currently have is very simple. I have the google script on my index.html and then my ad component which I'm calling under my App component.

import React from 'react';

export default class Ad extends React.Component {
  componentDidMount () {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

render () {
    return (
      <div className='ad'>
        <ins className='adsbygoogle'
          style={{ display: 'block' }}
          data-ad-client='ca-pub-4543556906953539'
          data-ad-slot='3566322911'
          data-ad-format='auto'
          data-full-width-responsive="true"
           />
      </div>
    );
  }
}

I was reading this thread and the answer was use googletags to manage served ads: Using google adsense with React + React Router

However I found the answer vague maybe because I have never used google tag manager nor ads manager before. Does anyone have more information on this?