Роутинг react. не получается сделать route

мне нужно что бы по клику на элемент(в данном примере Main page)

загружалась страница с url id обЪекта

сам объект создается так

const [input, setInput] = useState(JSON.parse(localStorage.getItem('index')) || []) ;
const [inputItem, setInputItem] = useState("");

useEffect(()=>{
    localStorage.setItem('index',JSON.stringify(input))
}, [input])

const addTodo = () => {
    if (inputItem !== "") {
        const newItem = {
            id: nanoid(),
            item: inputItem,
            status: 'backlog'
        }
        setInput([...input, newItem]);
        setInputItem("");
    }
};

при попытки передать в url id возникает не понятная ошибка и вся страница не грузится

  <div className='backlog-container'>
      <SimpleBar style={{ maxHeight: 921 }}>
      <h1 className='backlog-title'>Backlog</h1>
      {input.filter(item => item.status === 'backlog' ).map(filteredItem => (
          <div className='backlog-card'>
              <p  className='title'><Link to={inputItem.id}>{filteredItem.item}</Link></p>
          </div>
      ))}
      </SimpleBar>
      <div className="input-container">
        {show && <input
            className='input'
            type="text"
            name="todo"
            value={inputItem}
            onChange={(e)=>Foo(e)}
        />}
    <div className="backlog-button-box" onClick={addTodo}>
        <div onClick={()=> setShow(!show)}>
            {show ? <ActiveSubmit />:<Button />}
        </div>
    </div>
    </div>
      <Routes>
            <Route path={inputItem.id} element={<Page input={inputItem}/>}/>
      </Routes>

если сделать

<p  className='title'><Link to='/'>{filteredItem.item}</Link></p>

<Route path='/' element={<Page input={inputItem}/>}/

страница загружается но route не работает