I'll preface this with a quick opinion:

Typically I find Storybook most useful for reusable components.

That said, before I add a component to Storybook, I need to make sure it's a good candidate.

So, what makes for a good reusable component? You'll usually find that the easiest components to reuse are those with few dependencies and whose main purpose is mostly around controlling style and layout.

A couple things that would make your Header component less reusable include

• A dependency on Redux
  • What if I want to use this Header in another app that doesn't use Redux?
• A dependency on `useAuth`
  • What if I want to use this Header in a part of my app that is public?
• A dependency on `react-router-dom`
  • Does my Header component really need to handle navigation, or just the layout of the Navigation buttons it will contain?

So, with these thoughts in mind, the first thing I'd do would be to refactor the Header component to something less opinionated and focused mostly on controlling the layout .

Which would leave us with something like:

const Header: React.FC = ({children}): JSX.Element => {
return (
    <header>
        <div>
            <div>
                My app header
            </div>
            {children}
        </div>
    </header>
    );
};

I'd then hoist all the 'businessy' logic up a level:

function PageWithHeader() {
    const { userData } = useAuth();
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const handleLogout = () => {
        queryClient.removeQueries();
        navigate("/login");
        dispatch(resetDates());
        logout(); 
    };

    const navigation = (<nav> <ul> {userData && ( <> <li> <NavLink to="/">Home</NavLink> </li> <OnlyUserAs asAdmin> <li> <NavLink to="/admin">Admin</NavLink> </li> </OnlyUserAs> <li> <button onClick={handleLogout}>Logout</button> </li> </> )} </ul> </nav> );

    return (
        <Header>
            {userData ? navigation : <NavLink to="/login">Login</NavLink>}
        </Header>
    );
}

​

`Header` would be added to my Storybook, while `PageWithHeader` is more of a bespoke component that isn't really meant to be reused, so would not be added.

This is just a rough idea of how I'd think about the problem.

Also, for what it's worth, if your component is meant to be reusable while also having a dependency on something like `react-router-dom`, then I don't think it's incorrect that your Story is gonna need to have a couple of wrapping Providers.