Build the textbox and have value inside can be edit or delete

Question

I try to build a textbox that can edit the value inside the box. The problem is if the value = to my api, even it is a textbox form, I can't edit it. And if the value is the usestate inputvalue one input changed all the boxs changed. I can't find a way to fix it, I think it is because the map function print all my data but it only have one textbox form.

import './App.css';
import React, {useState, useEffect, useRef} from 'react';

function App() {
  const  [todos, setTodos] = useState([])
  // const  [ratings, setRating] = useState([])
  useEffect(() => {
    fetch("/facts")
    .then(response => response.json())
    .then(data => setTodos(data))
  },[])

  const changedInf = useRef('')

  
  const [inputValue, setInputValue] = useState();


  useEffect(() => {changedInf.current = inputValue},[inputValue])



  return ( 
    <div className="App">
      <header className="App-header">
      <div>
      {todos.map((todo, index) =>
        <li key={index}>
        Movie ID: {todo.movieid}  
        Rating: <input type="number" inputProps={{ min: 1, max: 10 }} value={todo.rating} onChange={(e) => setInputValue(e.target.value)}/>  
        Comment:{todo.comment}
        </li>
        )}
        
      </div>
        <button onClick={() => window.location.href="main"}>Back to main</button>
      </header>  
    </div>
    
  );
}

export default App;

app.js

import './App.css';
import React, {useState, useEffect, useRef} from 'react';

function App() {
  const  [todos, setTodos] = useState([])
  // const  [ratings, setRating] = useState([])
  useEffect(() => {
    fetch("/facts")
    .then(response => response.json())
    .then(data => setTodos(data))
  },[])

  const changedInf = useRef('')

  
  const [inputValue, setInputValue] = useState();


  useEffect(() => {changedInf.current = inputValue},[inputValue])



  return ( 
    <div className="App">
      <header className="App-header">
      <div>
      {todos.map((todo, index) =>
        <li key={index}>
        Movie ID: {todo.movieid}  
        Rating: <input type="number" inputProps={{ min: 1, max: 10 }} value={todo.rating} onChange={(e) => setInputValue(e.target.value)}/>  
        Comment:{todo.comment}
        </li>
        )}
        
      </div>
        <button onClick={() => window.location.href="main"}>Back to main</button>
      </header>  
    </div>
    
  );
}

export default App;

api 

[
  {
    "comment": "hello world", 
    "movieid": "476669", 
    "rating": 4
  }, 
  {
    "comment": "lo ha world", 
    "movieid": "476669", 
    "rating": 10
  }, 
  {
    "comment": "hi", 
    "movieid": "476669", 
    "rating": 2
  }, 
  {
    "comment": "koniqiwa", 
    "movieid": "476669", 
    "rating": 5
  }, 
  {
    "comment": "111", 
    "movieid": "634649", 
    "rating": 5
  }, 
  {
    "comment": "2", 
    "movieid": "634649", 
    "rating": 6
  }, 
  {
    "comment": "3", 
    "movieid": "634649", 
    "rating": 7
  }
]