How to fix saving duplicate items in my Reactjs todo list app?

Question

Summary

I am trying to create todo list in ReactJS. I expect only one list item to be added per action.

Actual Behavior

When I am adding to my todolist item, it adds the item twice.

App.js

import Header from "./components/Header";
import List from "./components/List";
import {useState} from "react";

function App() {

    const [items, setItem] = useState(function () {
            const storageItemsString = localStorage.getItem('items');
            if (storageItemsString) {
                return JSON.parse(storageItemsString);
            } else {
                return [];
            }
        }
    );

    function addItem(fieldValue) {
          setItem( (prevItems) => {
              const newItems = prevItems.concat(fieldValue);
              localStorage.setItem('items', JSON.stringify(newItems));
              return newItems;
          });
    }


    return (
        <div className="App">
            <div className="wrapper">
                <Header/>
                <List addItem={addItem} items={items}/>
            </div>
        </div>
    );
}

export default App;

List jsx

import React, {useEffect} from 'react';
import {Button, TextField} from "@mui/material";
import ListItem from "./listItem";

function List(props) {

    useEffect(() => {
        const textField = document.querySelector('#list-field');
        const button = document.querySelector('.button');

        button.addEventListener('click', function(e) {
            if (textField.value !== '') {
                props.addItem(textField.value);
            }
        });
    }, [props]);

    return (
        <div className="list-section">
            <form action="#" className="list-form">
                <TextField variant="outlined" label="Enter something" id="list-field" multiline
                           rows={4}/>
                <Button variant="contained" className="button">Add item</Button>
            </form>
            <div className="list-items">
                {props.items.map( (item) => <ListItem text={item} />)}
            </div>
        </div>
    );
}

export default List;

ListItem jsx

import React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';

function ListItem(props) {
    return (
        <div className="list-item">
            <div className="item-content">{props.text}</div>
            <span className="delete-icon">
                <DeleteIcon />
            </span>
        </div>
    );
}

export default ListItem;