Button onClick is not working inside a react functional component

I have just started learning Reactjs and stuck on this very basic button issue. I have a functional component named Todo which has a button delete inside it. It has onClick attribute and it runs a function deleteHandler, but when I click the button nothing happens. App.js and Todo.js codes are given below:

App.js code

import Todo from "./components/Todo.js";

function App() {
  return (
    <>
      <h1>Todos</h1>
      <Todo title="1st todo" />
      <Todo title="2nd todo" />
      <Todo title="3rd todo" />
      <Todo title="4th todo" />
    </>
  );
}

export default App;

Todo.js code

function Todo(props) {
    
      function deleteHandler() {
        console.log("U just deleted!");
      }
    
      return (
        <div className="card">
          <div className="content-card">
            <div>
              <h2>{props.title}</h2>
            </div>
            <div>
              <button type="button" className="btn" onClick={deleteHandler}>
                Delete
              </button>
            </div>
          </div>
        </div>
      );
    }

export default Todo;