Highlight active link in new react-router-dom v6

I need to highlight the active NavLink in react-router v6. It states in the docs (https://v5.reactrouter.com/web/api/NavLink) that we need to stop using className and instead go with an inline style function, but I cannot figure it out properly. Here is the code sandbox: https://codesandbox.io/s/router-v6-highlight-active-link-c50bo?file=/src/Home.jsx

Basically the code below shows how the docs tell us to do it, but it seems not to work for me.

          <NavLink 
            to='search' 
            className='navlinkbuttons'
            style={isActive => ({
              color: isActive ? "green" : "blue"
            })}
            >
              Search
          </NavLink>

All help is appreciated. Thanks!