im creating a simple app using the FARM(Fast API,React, MongoDB). I was following a tutorial on YT(https://www.youtube.com/watch?v=OzUzrs8uJl8). Ive been trying to solve this problem for the last day but no luck, if anyone can help that would be greatly appreciated, thanks

Todo.js

import axios from "axios"
import React from "react"

function TodoItem(props) {
    const deleteTodoHandler = (title) => {
        axios.delete('http://localhost:8000/api/todo/${title}').then(res =>console.log(res.data))}
        return (
            <div>
                <p>
                    <span style={{ fontWeight: 'bold, underline'}}>{props.todo.title} : </span> {props.todo.description}
                    <button onClick={() => deleteTodoHandler(props.todo.title)}
                    className="btn btn-outline-danger my-2 mx-2" style= {{'borderRadius':'50px',}}>X</button>
                    <hr></hr>
                </p>
            </div>
        )
}

export default TodoItem;

TodoListView.js

import TodoItem from "./Todo"

 function TodoView(props) {
     return (

         <div>
             <ul>
                {props.todoList.map(todo => <TodoItem todo= 
                {todo} />)}
             </ul>
         </div>
     )
 }
export default TodoView

p.s. if its a syntax error im sorry