cellRendererParams component doesn't receive props after a second component mount

I have a basic grid that renders a custom component in one of the cells and I also pass some props to this component inside renderer cell. It all works on the initial page load but if I go to another route and come back to the old route that has ag-grid, the application will crash because my cell renderer component no longer receive the props. What is causing this weird behaviour? Why is it working on initial page load but not the other component life cycles?

class UsersRoles extends Component {
  constructor(props) {
    super(props)
    this.state = {
      columnDefs: [
        {
          headerName: 'Phone',
          field: 'phone'
        },
        {
          headerName: 'Role',
          field: 'role'
        },
        {
          headerName: 'Edit',
          field: 'id',
          checkboxSelection: false,
          cellRenderer: 'EditIcon',
          cellRendererParams: (params) => {
            return {
              users: params.colDef.cellRendererParams.users,
              currentLoggedInUser: params.colDef.cellRendererParams.currentLoggedInUser,
              clickHandler: this.handleEditClick.bind(this)
            }
          },
        }
      ],
      frameworkComponents: {
        EditIcon
      }
    }

    this.handleEditClick = this.handleEditClick.bind(this)
  }

  componentDidMount() {
    this.props.fetchAllUsers()
  }

  handleEditClick(clickedUserId) {
    this.props.currentlyEditingUser(clickedUserId)
    this.props.openEditUserDetailsModal()
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevProps !== this.props) {
      const array = this.state.columnDefs
      array[4].cellRendererParams.currentLoggedInUser = this.props.currentLoggedInUser // update with loops instead of hardcode index selection
      array[4].cellRendererParams.users = this.props.users
      this.setState({ columnDefs: array })
    }
  }

  render() {
    return (
      <div style={styles.container}>
        <main style={styles.mainSection}>
          <CardSettings headline="Team members" size={{ flex: 3 }}>
            <div
              style={[styles.gridContainer, { width: '100%', height: '100%' }]}
              className="ag-theme-material custom-ag-theme ag-theme-material"
            >
              <AgGridReact
                columnDefs={this.state.columnDefs}
                rowData={this.props.users}
                frameworkComponents={this.state.frameworkComponents}
                suppressCellSelection
              />
            </div>
        </main>
      </div>
    )
  }
}

On initial page load params inside cellRendererParams has all the data of users but once the ag grid component unmount and mounts again, the params is empty.

      cellRendererParams: (params) => {
        return {
          users: params.colDef.cellRendererParams.users,
          currentLoggedInUser: params.colDef.cellRendererParams.currentLoggedInUser,
          clickHandler: this.handleEditClick.bind(this)
        }
      },

How can I make sure that my cell renderer component EditIcon always receive the users and currentLoggedInUser props and not only on initial page load?