React Front, Rails Back states when fetch won't persist

Question

the states are passed down the app yet when moving from one route to another the information keeps resetting, noting is presistning. I used a byebuge which showed the back end in being utilized, but which functionality it does not appear that way.

session

def create # byebug user=User.find_by(full_name: params[:full_name])

    if user&.authenticate(params[:password])

        session[:user_id] = user.id
        render json: user
    else
        render json:{errors: ["Invalid pin try again"]}, status: unauthorized
    end
    # byebug
    # render json: 'the world'
end



def destroy
    session.delete :user_id
    head :no_content
end

resource back end

  resources :charges, only: [:create]
  resources :car_shops, only: [:update,:index, :show,:create,:destroy]
  resources :massages, only: [:update,:index, :show,:create,:destroy]
  resources :users, only: [:index, :show, :create, :destroy]

 
  get "/me", to: "users#show"
  
  post '/login', to: "sessions#create"
  delete '/logout', to: "sessions#destroy"

  get "/me/massage", to: "users#massage"
  get "/me/carshop", to: "users#car"

  get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }


the app front end 


  const [user, setUser]=useState('')
  const [cost, setCost]=useState('')

    const[name, setName]=useState('')
    const[request, setRequest]=useState('')
    const[price, setPirce]=useState(0)

  function handleAdd(add){

    if (price >= 0) setPirce( price+parseFloat(add.target.value))
    }
    
  function handleSubtract(x){
  if (price > 0) setPirce(price-parseFloat(x.target.value))
  }


  useEffect(() => {
   fetch('/me')
    .then(response => response.json())
    .then(data => setUser(data) )
  },[])
 

  const theme = createTheme({
    palette: {
      primary: {
        main: '#e0e0e0'
        //sliver
        ,
      },
      secondary: {
        main: '#fffffb',
        //ligh light brown
      },
    },
    typography:{
      fontFamily:'Century Gothic,CenturyGothic,AppleGothic,sans-serif',
      color: '#a98274'
      //baige like my car
    }
  });


function logout(){
  setUser(null)
}
function login(x){
  setUser(x)
  // setUser(parseInt(x))
}

  function dataString(e){
    setName( e.target.name )
  }
  function dataAddNumber(e){
    setPirce( price+ parseFloat( e.target.value) )
  }
  function dataSubNumber(e){
    if ( price >0) setPirce( price- parseFloat( e.target.value) )
  }
  function dataRequest(e){
    setRequest( e.target.value )
  }


  return (


    // {pin? render the nav bart and convertLength
    
    // : will render the login and sigh up.}

    <div className="App">
      <ThemeProvider theme ={theme}>

        <SelNavBar user={user} logout={logout} cost={price} />
      <Routes>

        <Route exact path='/' element={<Login user={user} login={login}/> }/>

        <Route exact path='/massage' element={<Massage  setCost={setCost} price={price} request={request} name={name} dataString={dataString} dataRequest={dataRequest} dataSubNumber={dataSubNumber} dataAddNumber={dataAddNumber} add={handleAdd} subtract={handleSubtract}/>} />

        <Route exact path='/carshop' element={<CarShop setCost={setCost} service={dataString} priceAdd={dataAddNumber} priceSubtract={dataSubNumber} price={price} name={name} add={handleAdd} subtract={handleSubtract} />} />

        {/* <Route exact path='/payment' element={<Payment cost={cost} />} /> */}

      </Routes>

      </ThemeProvider>
    </div>
  );