React – What is the Best Way to use Multiple createContexts?

I’ve just learned about the createContext hook and I’m wondering what’s the best approach to using multiple contexts globally throughout the project.

From what I’ve seen if you want to create and use multiple contexts it looks kinda messy having multiple nested Context tags and I’m wondering if there is a cleaner looking way of doing this?

(Example of how I think a project using four contexts would look)

import React, { createContext, useState } from "react";

export const OneContext = createContext();
export const TwoContext = createContext();
export const ThreeContext = createContext();
export const FourContext = createContext();

export default function App(){
    const [one, setOne] = useState(null);
    const [two, setTwo] = useState(null);
    const [three, setThree] = useState(null);
    const [four, setFour] = useState(null);

   return(
        <>
            <OneContext.Provider value={one}>
                <TwoContext.Provider value={two}>
                    <ThreeContext.Provider value={three}>
                        <FourContext.Provider value={four}>            
                            "Insert components here"
                        <FourContext.Provider />
                    <ThreeContext.Provider />
                <TwoContext.Provider />
            <OneContext.Provider />
        </>
   )
}