how do i use the same navlink to be active for multiple pages? using react js and react router dom

Question

I have a navlink that goes to '/articles', and I need it to be active for another page '/mainarticle' but it does not route to it .. the main article page is viewed when I click on a button inside '/articles'.

I found an answer in https://stackoverflow.com/a/62228742/16642112 on which I wrote the following code but it is not working.

import React from "react";
import { NavLink } from "react-router-dom";
import { useLocation } from 'react-router-dom';

const InnerNav = () => {

    const { pathname } = useLocation();

    const activeStyle = ({ isActive }) => {
        return {
            backgroundColor: isActive ? '#ffbe56' : 'none'
        }
    }

    return (
  <div className="inner_ul">
  <NavLink
                            to="/articles"
                            isactive={() => ['/articles', '/mainarticle'].includes(pathname)}
                            style={activeStyle}
                            id="inner_ul_li"
                        >
                            Articles
                        </NavLink>
                       
</div>
)
}

and I get this warning in the console "react-dom.development.js:67 Warning: Invalid value for prop isactive on tag. Either remove it from the element or pass a string or number value to keep it in the DOM. For details, see https://reactjs.org/link/attribute-behavior "

thanks to any of you who can help me.