Instead of a boolean in useState you should store an identifier unique to the NavLink that is activated.

import React, {useState } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle';

export default function Nav({openHandler}) {

    const [isActive, setIsActive] = useState('');

    const clickHandler = (e) => {
        setIsActive((isActive) => isActive = e.currentTarget.id);
    }

    return (
        <Navbar>
            <NavContainer>
                <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo>
                <NavMobileIcon onClick={openHandler}>
                    <AiOutlineMenu />
                </NavMobileIcon>
                <NavLists>
                    <NavList onClick={clickHandler} id="about" className={isActive === 'about' && 'active'}>
                        <NavLink to="#about">About</NavLink>
                    </NavList>
                    <NavList onCLick={clickHandler} id="discover" className={isActive === 'discover' && 'active'}>
                        <NavLink to="#discover">Discover</NavLink>
                    </NavList>
                    <NavList onClick={clickHandler} id="services" className={isActive === 'services' && 'active'}>
                        <NavLink to="#services">Services</NavLink>
                    </NavList>
                </NavLists>
                <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn>
            </NavContainer>
        </Navbar>
    )
}

Disclaimer: This code might not run successfully, because I didn't run it in the first place. It is merely a hint to guide you in the right direction.

Another approach would be a useRef hoof in order to store an identifier of the NavList that has been clicked and access that identifier inside clickHandler

You have same click handler for all the NavList components. So when you click any of them the handler will toggle isActive prop. As all the className conditions uses the same isActive prop it will change class of all them. You have to figure out which one was clicked and is active.

import React, {useState } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle';

export default function Nav({openHandler}) {

    const [active, setActive] = useState('about'); // about is default value

    const clickHandler = (name) => () => {
        setActive(name);
    }

    return (
        <Navbar>
            <NavContainer>
                <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo>
                <NavMobileIcon onClick={openHandler}>
                    <AiOutlineMenu />
                </NavMobileIcon>
                <NavLists>
                    <NavList onClick={clickHandler('about')} className={active === 'about' ? 'active' : ''}>
                        <NavLink to="#about">About</NavLink>
                    </NavList>
                    <NavList onCLick={clickHandler('discover')} className={active === 'discover' && 'active'}>
                        <NavLink to="#discover">Discover</NavLink>
                    </NavList>
                    <NavList onClick={clickHandler('services')} className={active === 'services' && 'active'}>
                        <NavLink to="#services">Services</NavLink>
                    </NavList>
                </NavLists>
                <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn>
            </NavContainer>
        </Navbar>
    )
}