NextJS 13 Context API and SEO optimisation

Question

I would like to have some clarifications about how NextJS 13 handles client/server components in conjunction with its context API.

So, from what I know :

• Client components can only have and create client components passed has children (Exception being {children} passed as child as seen here)
• Context API should be one of the highest component in the hierarchy
• Context API only works with the 'use client' directive
• To optimise SEO we should use server components

So, from what I understand, we can use the Context API with use client, states and life cycle effects in the root of the app if the props passed are {children} and still be optimised for SEO.

Am I wrong ?

---

I was thinking about something like this

"use client";
import { createContext, useContext, useState} from 'react';

const Context = createContext();

export default function AppWrapper({children}) {
  const [state, setState] = useState("'m a state !")
  return (
    <Context.Provider value={{state: state}}
      {children}
    <Context.Provider/>
  )
}

export function useAppContext() {
    return useContext(Context);
}

Does this approach enables us to have a context in a SEO friendly manner ?