APP.jsx Todos.jsx CREATETODO.jsx
These are the part of code where error is occuring.
error errors

FRONTEND CODE (APP.jsx)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { CreateTodo } from './components/CreateTodo'
import { Todos } from './components/Todos'

function App() {
  const [todos, setTodos] = useState([]);
  return (
      <div>
        <CreateTodo></CreateTodo>
        <Todos todos={todos}></Todos>
      </div>
  )
}

export default App

FRONTEND CODE(Todos.jsx)

export function Todos({todos}){
    return <div>
        {todos.map(function(todo) {
            return <div>
                <h1>{todo.title}</h1>
                <h2>{todo.description}</h2>
                <button>{todo.completed == true? "Completed" : "Mark as Complete"}</button>
                </div>
        })}
    </div>
}

FRONTEND CODE(CreateTodos.jsx)

export function CreateTodo() {
    return <div>
        <input id="title" style={{
            padding:10,
            margin:10
            }}type="text" placeholder="title" onChange={function(e) {
                const value=e.target.value;
                setTitle(e.target.value);
            }}></input><br></br>
        <input id="desc" style={{
            padding:10,
            margin:10
            }}type="text" placeholder="description" onChange={function(e) {
                const value=e.target.value;
                setDescription(e.target.value);
            }}></input><br></br>
        <button style={{
            padding:10,
            margin:10
            }}onClick={() =>{
                fetch("http://localhost:3000/todo",{
                    method:"POST",
                    body: JSON.stringify({
                        title: title,
                        description: description
                    }),
                    headers: {
                        "Content-Type": "application/json"
                        }
                })
                .then(async function(res){
                    const json = await res.json();
                   alert("TODO ADDED");
                })
    }}>Add a Todo</button>
    </div>
}

I WAS CREATING A TODO LIST I DID THE BACKEND PART WHICH WAS WORKING
THEN I DID THE FRONTEND PART USING REACT BUT IT IS SHOWING ERROR IN FEW PLACES SHOWING THAT IT IS DECLARED BUT ITS VALUE IS NEVER READ AND MISSING PROPS VALIDATION EVEN THOUGH THE CODE IS RIGHT.
IT IS NOT ONLY FOR THIS CODE BUT IN OTHER CODES WHERE I HAVE USED REACT IT IS SHOWING THE SAME.I THINK THERE IS SOME ERROR IN VS CODE

EVEN THOUGH CODE IS RIGHT IT IS SHOWING SAME ERROR.
IT IS SHOWING FOR OTHER CODES ALSO WHERE REACT IS USED.
PLEASE HELP ME FIX THIS.