gorest.co.in/public/v1/users:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)

how to solve this error? this is my code:- import "./App.css"; import React, { useEffect, useState } from "react"; import Axios from "axios";

function App() { const url = "https://gorest.co.in/public/v1/users"; const token = "8498579f1bcca86778493562939981f29b2ed572714974a02740856d036a31f5"; const config = { headers: { Authorization: Bearer ${token} }, };

const [data, setData] = useState({ name: "", email: "", gender: "", status: "", }); function submit(e) { e.preventDefault(); Axios.post(url, config, { name: data.name, year: data.email, gender: data.gender, staus: data.status, }).then((res) => { console.log("latest details is", res); }); }

function handle(e) { const newdata = { ...data }; newdata[e.target.id] = e.target.value; setData(newdata); console.log("new data is........", newdata); }

return ( <div className="App"> <h1>Lets use axios</h1> <form onSubmit={(e) => submit(e)}> <input onChange={(e) => handle(e)} id="name" value={data.name} placeholder="name" type="text" ></input> <br />

    <input
      onChange={(e) => handle(e)}
      id="email"
      value={data.email}
      placeholder="email"
      type="text"
    ></input>
    <br />
    <input
      onChange={(e) => handle(e)}
      id="gender"
      value={data.gender}
      placeholder="gender"
      type="text"
    ></input>
    <br />
    <input
      onChange={(e) => handle(e)}
      id="status"
      value={data.status}
      placeholder="status"
      type="text"
    ></input>
    <br />
    <br />
    <button>Submit</button>
  </form>
</div>

); }

export default App;