React-router-dom NavLink Icon Updater «Превышена максимальная глубина обновления»

Мы работаем над проектом с использованием React.js. Я настраиваю несколько страниц с помощью react-router-dom и хочу изменить текущий активный значок с помощью NavLink.

icon+sel для активной страницы.

Я переписал код на основе ответов на предыдущие вопросы. SetState также вышел из рендера, и я немного коснулся других настроек.

ошибка.... ошибка

приставка... консоль-1консоль-2

import React from 'react';
import { Link, NavLink, Router } from 'react-router-dom';
import ReactDOM from 'react-dom';
import home from './home.svg';
import homesel from './homesel.svg';
import search from './search.svg';
import searchsel from './searchsel.svg';
import setting from './setting.svg';
import settingsel from './settingsel.svg';
import add from './add.svg';
import addsel from './addsel.svg';
import account from './account.svg';
import accountsel from './accountsel.svg';


import './Bottom.css';



class Bottom extends React.Component {
  state = {
    iconName : 'initialIconName'
  }

  setIconName = (name) => {
    this.setState(() => ({
      iconName: name
    }))
  }

  oddEvent = (match, location) => {
  if (!match) return false
  console.info(location.pathname.substr(1).split('/')[0])
  this.setState(() => ({
    iconName: location.pathname.substr(1).split('/')[0]
  }))
  }

    render() {
      return (
          <fragment>
            <div className = "bottom noright">
              <div className = "bottomcontents">
                <div className = "bottomicon">
                    <NavLink className = "bottomiconinside bottomiconinsideside" src = {home} exact to = "/" isActive = {this.oddEvent}>
                    <img className = "iconcenter" src = {require(`./home${this.state.iconName == 'home' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className = "bottomiconinside bottomiconinsideside" exact to = "/search" isActive = {this.oddEvent}>
                    <img className = "iconcenter" src = {require(`./search${this.state.iconName == 'search' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className = "bottomiconinside bottomiconinsideside" to = "/add" isActive = {this.oddEvent} >
                    <img className = "iconcenter" src = {require(`./add${this.state.iconName == 'add' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className = "bottomiconinside bottomiconinsideside" to = "/account" isActive = {this.oddEvent}>
                    <img className = "iconcenter" src = {require(`./account${this.state.iconName == 'account' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className = "bottomiconinside bottomiconinsideside" exact to = "/setting" isActive = {this.oddEvent}>
                    <img className = "iconcenter" src = {require(`./setting${this.state.iconName == 'setting' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                </div>
              </div>
            </div>
              </fragment>
        );
    }

  }

export default Bottom;