how to wrap React-router with context provider

Question

In react js app, i am trying to create context data in section1 page to use it in all-answer page, the point is the all-answer must be a child to section1 for i can transfer the data but there are separate pages and have routes, so how can i wrap the react router with context provider or if there is a different way to handle it?

import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Header from './component/Header/Header';
import Intro from './pages/Intro';
import Section1 from './pages/Section1';
import Section2 from './pages/Section2';
import AllAnswer from './pages/AllAnswer';

 function App() {
    return (
<BrowserRouter>
  <Header/>
  <Routes>
    <Route path='/' element={<Intro />}/>
    <Route path='/section1' element={<Section1 />} />
    <Route path='/section2' element={<Section2/>}/>
    <Route path='/all-answer' element={<AllAnswer />}/>
  </Routes>
</BrowserRouter>
  );
 }

  export default App;

  import React , { useState, createContext} from 'react'
  import { Link } from 'react-router-dom'
   export const sectionOneContext = createContext("");

   function Section1() {

   const [value1, setValue1] = useState('both')
   const [value2, setValue2] = useState('')
   const [value3, setValue3] = useState('')
   const data = {
      answer1: value1,
      answer2: value2,
      answer3: value3
    }
   return (
     <sectionOneContext.Provider value={data}>
       <div className='container'>
        <div className='col-md-8 shadow p-3 mb-5 bg-body rounded my-5 mx-auto '>
          <h2 className='text-center'>Section 1</h2>
          <ol className="list-group list-group-numbered">
            <li className="list-group-item">
              Is your business model B2C or B2B or both?
              <ol type='A' className='my-2'>
                 <li>B2C</li>
                 <li>B2B</li>
                 <li>both</li>
              </ol>
              <input type='text' onChange={(e)=> setValue1(() =>{ 
               e.target.value.toLowerCase())}} />
           </li>
            {value1 === 'b2b' ||value1 ===  'both' ?
           <li className="list-group-item">
              Do you target all age brackets?
             <ol type='A' className='my-2'>
               <li>yes</li>
               <li>No</li>
            </ol>
           <input type='text' onChange={(e)=> setValue2(() =>{ 
             e.target.value.toLowerCase())}} value={value2}/>
           </li>
           : null
             }
           {value1 === 'b2c' ||value1 ===  'both' ?
      
           <li className="list-group-item">
              Do you target all industries?
              <ol type='A' className='my-2'>
                <li>yes</li>
                <li>No</li>
              </ol>
              <input type='text'onChange={(e)=> setValue3(() => {
                    e.target.value.toLowerCase())} value={value3}/>
            </li>
            : null }
         </ol>
         <Link to='/all-answer'>
            <button type="button" className="btn btn-dark ms-auto d-block">
             Next
               <i className="fa-solid fa-arrow-right-long ms-2"></i>  
            </button>
        </Link>
     </div>
   </div>
  </sectionOneContext.Provider>
  )
  }

  export default Section1

  import React,{useContext} from 'react'
  import {sectionOneContext} from './Section1'
   function AllAnswer() {
      const {answer1} = useContext(sectionOneContext)
      console.log(answer1)
     return (
        <div>AllAnswer</div>
      )
      }

   export default AllAnswer

Answer 1

In order to share data between Routes ,the data must live in the App. So you should create the context in the app not in section1 and provide a function in the context to change it like that:

....
export const sectionOneContext = useContext({});
....

function App() {
    const [data, setData] = useState({});
    return (
        <BrowserRouter>
           <sectionOneContext.Provider value={{data, setData}}>
              ....
           </sectionOneContext.Provider>
        </BrowserRouter>
  );
 }

and in any other component that needs to have or modify this data do the following:

import { useContext } from "react";
import { sectionOneContext } from "./App";

function component(){
   const {data, setData} = useContext(sectionOneContext);
   
   return (
      ....
   );
}