Every object that I click, will give me this link: http://localhost:3000/edit/$%7Buser.id%7D

It supposed to give an id of each object that I click, but it doesn't.

User.js List

import React, { useContext} from 'react';
import { GlobalContext } from '../context/GlobalState';
import { Link } from 'react-router-dom';
import {
    ListGroup,
    ListGroupItem,
    Button
} from 'reactstrap';


export const UserList = () => {
  const { users } = useContext(GlobalContext);
  return (
    <ListGroup className='mt-3'>
      {users.map(user => (
         <ListGroupItem >
         <strong>{user.name}</strong>
         <div  style={{  float: "right"}}>
             <Link className='btn btn-warning mr-1' to={'/edit/${user.id}'}>Edit</Link>
             <Button color='danger' style={{  marginLeft: "10px"}}>Delete</Button>
         </div>
         </ListGroupItem>
      ))}
       
    </ListGroup>
  )
}

GlobalState.js

import React, { createContext, useReducer} from 'react';
import AppReducer from './AppReducer';

// Inisial State
const initialState = {
    users: [
        {id: 1, name: 'user one'},
        {id: 2, name: 'user two'},
        {id: 3, name: 'user three'}
    ]
};

export const GlobalContext = createContext(initialState);

// Provider Component

export const GlobalProvider = ({children}) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);

    return (
        <GlobalContext.Provider value={{
            users: state.users
        }}>
            {children}
        </GlobalContext.Provider>
    )
}

The error:

What went wrong cause of this?