Reactjs – Best practice to pass state and state modifier to a component

I’m trying to refactor a component that receives a lot of properties. I am trying to think on how to improve for example with patterns such as these https://javascript.plainenglish.io/5-advanced-react-patterns-a6b7624267a6

But how would you simplify the properties in a code like this one

const App = () => {
    const [ab, setAb] = useState();
    const [c, setC] = useState();
    const [d, setD] = useState();

    // stuff with all available state
    return (<Example ab={ab} setAb={setAb} c={c} setC={setC} d={d} setD={setD} />)
} 


const Example = ({ab, setAb}) => {
   const [a, setA] = useState();

    // stuff with all available vars
   return  (
        <>
          <A ab={ab} setAb={setAb}  a={a} setA={setA}/>
          <B ab={ab} setAb={setAb}/>
          <C c={c} setC={setC} d={d} setD={setD}/>
        </>      
    )
}

const A = ({ab, setAb, a, setA}) => {
     // stuff with all available vars
    return <div>{a}</div>
}

const B = ({ab, setAb}) => {
    // stuff with setAb
   return <div>{ab}</div>
}

const C = ({c, setC, d, setD}) => {
    // stuff with all available vars
    return (<D d={d} setD={setD} />)
}

const D = ({d, setD}) => {
    // stuff with setAb
   return (<div>{d}</div>);
}

I would like to reduce the number of props, or group them. Is there any pattern of grouping those that go together? (state + state modifier)