Change Text onClick with Mobx State (No map list)

I want to be able to change text depending on new input values with mobx. i want the value of the paragraph to change according to stored notes value, without having to map a list push note items.

here's the notes store:

been having some problems implementing a solution. only examples of a direct state change are todo lists which i dont need right now

import { action, computed, makeObservable, observable } from 'mobx'

interface NoteItem {
    notes: string

}

export class NotesStoreImplementation {
    notes: NoteItem[] = []

    constructor() {
        makeObservable(this, {
            notes: observable,
            updateNote: action,
        })
    }

    updateNote(notes: string) {
        const item: NoteItem = {
            notes,
        }
        this.notes.push(item)
    }


}

export const NotesStore = new NotesStoreImplementation()

heres the component:

import {
    List,
    ListItem,
    ListItemAvatar,
    ListItemIcon,
    ListItemSecondaryAction,
    ListItemText,
    TextField
} from '@material-ui/core'
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import SubjectRoundedIcon from '@material-ui/icons/SubjectRounded'
import axios, { AxiosError, AxiosResponse } from 'axios'
import { observer } from 'mobx-react'
import React, { useState } from 'react'
import { NotesStoreImplementation } from '../../stores/NotesStore'
import { PrintEvent } from '../../stores/PrintStore'
import { useStores } from '../../stores/RootStore'

interface NotesProps {
    notesStore: NotesStoreImplementation
}

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1,
            maxWidth: 752,
        },
        demo: {
            backgroundColor: theme.palette.background.paper,
        },
        title: {
            margin: theme.spacing(4, 0, 2),
        },

        noteForm: {
            marginTop: theme.spacing(2),
            width: '100%'
        },
        updateButton: {

        },
        noteItem: {
            marginTop: theme.spacing(2),
            fontSize: '1rem'
        }
    })
)

// CSRF token
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.defaults.withCredentials = true

export const Notes: React.FC<NotesProps> = observer(({ notesStore }) => {
    const { print, ui } = useStores()
    const classes = useStyles()


    const [value, setValue] = useState<string>('')

    const updateNotes = (e: any, printEvent: PrintEvent) => {
        let patchNotes = {
            notes: ui.selectedEvent.notes,
        }
        patchNotes.notes = e.target.value
        //patch axios
        axios.patch(`events/${printEvent.id}/`, patchNotes).then((response: AxiosResponse) => {
            ui.setNotes(e.target.value)
            print.updateEvent(printEvent.id, 'value', printEvent.value)
        }).catch((error: AxiosError) => {
            if (error.code === '403' || String(error).includes('403')) {
                console.error('Unable to update event. This is likely a CSRF issue.',
                    'If you are accessing via "localhost" try "127.0.0.1" instead.')
            } else {
                console.error('Unable to update event', error)
            }
        })
    }

    return (
        <div>
            <TextField
                type="text"
                className={classes.noteForm}
                id="notes"
                label="Notes"
                variant="outlined"
                value={value}
                onChange={(event) => {
                    setValue(event.target.value)
                }}
            />
            <Button
                variant="outlined"
                onClick={() => {
                    //if value has changed erase the old value
                    if (value) {
                        notesStore.updateNote(value)
                        setValue(value)
                    }
                }}
            >
                Update Notes
            </Button>
            <List>
                <ListItem className={classes.noteItem}>
                    <ListItemIcon>
                        <SubjectRoundedIcon />
                    </ListItemIcon>
                    <p>{value}</p>

                </ListItem>

            </List>

        </div>
    )
})