Reactにてnanoidを適用したい

前提・実現したいこと

Reactにおいて、nanoidを使用したい。

ReactにてToDoリスト作成を行っております。
現段階ではフォーム内に入力したものが追加され、付加した□(チェックボックス)を押せば、完了したタスクに横線を引けるところまで作成できています。

発生している問題・エラーメッセージ

Ubuntuにて「npm i nanoid」ののち、「cat package.json」入力にてnanoidの記載を確認後、コード内の諸所にnanoidを入力するも定義を求められる。

エラーメッセージ
ブラウザ上で「Failed to Compile('nanoid' is not defined no undef)」とでてしまう。

該当のソースコード

App.js-----------------------------------------------------

import React, { useState } from "react";
import Form from "./Form"
import List from "./List"

const App = () => {
const [todos, setTodos] = useState([])

const addTodo = (value) => {
    setTodos([
        ...todos,
        {
            content: value,
            id: nanoid()

        }
    ])
}

return (
    <>
        <h1>ToDo App</h1>
        <Form addTodo={addTodo} />
        <List todos={todos}></List>
    </>
)

}

export default App

List.js----------------------------------------------------
import React from "react"
import Item from "./Item" //List内のItemなのでこのコード必要

const List = ({ todos }) => {
return (
<ul>
{/<Item content={todos[0].content}></Item>
<Item content={todos[1].content}></Item>
<Item content={todos[2].content}></Item>/}

        {
            todos.map((todo) => {
                return (
                    <Item content={todo.content}
                        key={todo.id} />
                )
            })
        }
    </ul >

)

}

export default List

試したこと

キーワード検索をかけてみるも似たような情報が見つかりませんでした。
Ubuntuにてyarn add nanoidとnpm i nanoidの二通りのインストール方法があり、私は後者でインストールしたので、当初yarn startでブラウザを起動させていたものをnpm startで起動させてみるも、変化なし。
nanoidのサイトを確認するも、インストールされたことが確認さえできれば、ページ記載のコーディングで可能とのことだが、実行してもエラーが出てしまう。
参照サイト：https://www.npmjs.com/package/nanoid