react functional component 再レンダーされない

react のhooksを使ってsetStateを呼びだしたときに、再レンダリングが走りません。
なぜでしょうか？
todoアプリのdeleteを押したときに、stateの値は更新されているようですが、再描画が走りません。
stateには配列を入れて、更新をしているはずなのですが。。
以下、コードです。

// app.txs
const App = () =>{
const [todo, setTodo] = React.useState<String[]>([])
// データ保存
function handleAdd(e:any){
    e.preventDefault()
    setTodo(todo.concat(e.target.title.value))
    e.target.title.value=""
}
// データ削除
const handleRemove = (i:number)=>{
    // todo 配列のi番目から1つ目のデータを除外
    todo.splice(i,1)
    setTodo(todo)
    console.log(todo)
}
return(
    <div>
        <h1>React Todo App</h1>
        <Form handleAdd={handleAdd} />
        <div></div>
        <List todos={todo} handleRemove={handleRemove} />
    </div>
)
}
ReactDOM.render(<App/>, document.getElementById("app"))


// List.tsx
const List = (props: any) =>{
return (
<ul>
    {props.todos.map((v:any, i:any) =>{
        return <li key={i}>{v} <span style={{cursor: "pointer"}} onClick={()=>{props.handleRemove(i)}}>delete</span></li>
    })}
</ul>
)}
export default List