src/components/Todo.tsx

import React, { useState } from "react";

type Todo = {
 id: number;
 text: string;
 completed: boolean;
};

const Todo: React.FC<Todo> = ({ id, text, completed }) => {
 const [checked, setChecked] = useState(completed);

 const handleChange = () => {
    setChecked(!checked);
 };

 return (
    <div>
      <input type="checkbox" checked={checked} onChange={handleChange} />
      <p>{text}</p>
    </div>
 );
};

export default Todo;