You need to either use routing/conditional displaying using Javascript, here your trying to use both.

Without routing

import React, { useState } from 'react';
import { NavLink, Outlet } from "react-router-dom"; 
 
function SidenavSection(props) {
    const [active, setActive] = useState("tab1")

    const isActive = (key) => (active === key ? 'active' : '');

    return (
        <div>          
            <div >
            <div sm="3" className='border sideNav'>
            <a href="" className=`btn btn-link ${isActive('tab1')}`    onClick={() => setActive("tab1")}>Overview</a> <br/>
            <a href="" className=`btn btn-link ${isActive('tab2')}`  onClick={() => setActive("tab2")}>Align & Ratio</a> <br/>
            <a href="" className=`btn btn-link ${isActive('tab3')}`    onClick={() => setActive("tab3")}>Avatar</a> <br/>       

                </div>
                <div sm="9" className='border'>                   
                    <div>
                    {active === "tab1" && <div>section component 1</div>}
                    {active === "tab2" && <div>section component 2</div>}
                    {active === "tab3" && <div>section component 3</div>}
               
            </div>
                </div>
            </div> 
        </div>
    );
}

export default SidenavSection;

First of all, you don't need to use NavLink for this. You can achieve active class by adding a ternary operator for the classnames.

import React, { useState } from "react";
    import { NavLink } from "react-router-dom";
    export default function App() {
      const [active, setActive] = useState("tab1");
    
  return (
    <div>
      <div>
        <div sm="3" className="border sideNav">
          <p
            to=""
            className={`btn btn-link ${active === "tab1"? "active":""}`}
            onClick={() => setActive("tab1")}
          >
            Overview
          </p>{" "}
          <br />
          <p
            to=""
            className={`btn btn-link ${active === "tab2" && "active"}`}
            onClick={() => setActive("tab2")}
          >
            Align & Ratio
          </p>{" "}
          <br />
          <p
            to=""
            className={`btn btn-link ${active === "tab3" && "active"}`}
            onClick={() => setActive("tab3")}
          >
            Avatar
          </p>{" "}
          <br />
        </div>
        <div sm="9" className="border">
          <div>
            {active === "tab1" && <div>section component 1</div>}
            {active === "tab2" && <div>section component 2</div>}
            {active === "tab3" && <div>section component 3</div>}
          </div>
        </div>
      </div>
    </div>
  );
}

You should however try making an object or array including the links data, so you can easily loop through without much code, and setting active link also will be easier this way.

import React, { useState } from "react";
import { NavLink } from "react-router-dom";
export default function App() {
  const [active, setActive] = useState("0");
  const els = [
    {tab:1, name: "Overview",},
    {tab:2, name: "Avatar"},
    {tab:3, name: "Align & Ratio"},
  ]
  return (
    <div>
      <div>
        <div sm="3" className="border sideNav">
          {
            els.map((item, index)=>{
              return <p 
                onClick={()=>{setActive(index)}} 
                key={index}  
                className={index === active ? "active" : ""}
              >
                {item.name}
              </p>
            })
          }
          <br />
        </div>
        <div sm="9" className="border">
          <div>
            {active === "tab1" && <div>section component 1</div>}
            {active === "tab2" && <div>section component 2</div>}
            {active === "tab3" && <div>section component 3</div>}
          </div>
        </div>
      </div>
    </div>
  );
}