我尝试用 React 制作简单的项目。我有一个 TodoItem 组件。我的期望是在选中复选框后更改边框颜色。但是，选中该复选框后，我的组件不会改变颜色。难道我做错了什么？我应该采取什么步骤？

应用程序.jxs

import './App.css'
import './components/TodoItem/TodoItem.jsx'
import TodoItem from './components/TodoItem/TodoItem.jsx'

function App() {
  return (
    <>
      <TodoItem taskName={'Clean House'} statusInit={true} ></TodoItem>
      <TodoItem taskName={'Read Book'} statusInit={false} ></TodoItem>
      <TodoItem taskName={'Clean Bed'} statusInit ={true} ></TodoItem>
    </>
  )
}

export default App

TodoItem.jsx

import "./TodoItem.css";
import { useState } from "react";

function TodoItem({ taskName, statusInit }) {

  const [status, setStatus] = useState(statusInit);
  const [count, setCount] = useState(0);
  let myClass = statusInit ? 'done' : 'todo-item'


  function checkBoxOnChange(e) {
    setStatus(e.target.checked);
    setCount(count + 1);
    statusInit = e.target.checked;
    myClass = statusInit ? 'done' : 'todo-item'
  }
  return (
    <>
      <main className={myClass}>
        <input 
          checked={status}
          type="checkbox"
          onChange={checkBoxOnChange}
          id="todo-item-status"
        />
        <p>{`${status}`}</p>
        <p>{taskName}</p>
        <p>{count}</p>
      </main>
    </>
  );
}

export default TodoItem;

TodoItem.css

.todo-item{
    width: 300px;
    margin: 16px;
    padding: 16px; 
    border: solid royalblue 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}

.done{
    width: 300px;
    margin: 16px;
    padding: 16px; 
    border: solid green 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}