React typescript - Gettting type error when trying to assign React's key prop

Question

I have simple code as follows:

/types.ts

export type TodoType = {
  id: String
  task: String
  completed: Boolean
}

/components/Todo.tsx

import { TodoType } from '../types'

type TodoProps = {
  todoData: TodoType
}

const Todo = ({ todoData: { task } }: TodoProps) => {
  return <div>{task}</div>
}

export default Todo

/pages/index.tsx

import Todo from '../components/Todo'
import {TodoType} from '../types'

const Index = () => {
  const { data, isLoading } = useQuery('todos', todosQuery)

  if (isLoading) return <p>Loading ...</p>

  return (
    <div>
      {data.todos.map((todo: TodoType) => (
        <Todo key={todo.id} todoData={todo} />
      ))}
    </div>
  )
}
export default Index

I keep on getting this following error: https://i.stack.imgur.com/AmYoo.png

(property) Attributes.key?: Key | null | undefined

Type 'String' is not assignable to type 'Key | null | undefined'.ts(2322)

The expected type comes from property 'key' which is declared here on type 'IntrinsicAttributes & TodoProps'

any idea how to fix this?