hi guys i am new to programming so i got task to do where i am trying to add new data to the list i was able to get data from list but i am not able to add i gets error 403 could you guys help with this

import * as React from "react";
// import styles from "./CreateNote.module.scss";
import type { ICreateNoteProps } from "./ICreateNoteProps";
import { SPFI } from "@pnp/sp";
import { getSP } from "../pnpjsConfig";

export default class CreateNote extends React.Component<ICreateNoteProps, {}> {
  targetSiteUrl =
    "https://newdawnitsolutions.sharepoint.com/sites/yapprovaldata";
  spFi: SPFI;

  constructor(props: any) {
    super(props);
    this.state = {};
    this.spFi = getSP(this.targetSiteUrl);
  }

  async componentDidMount() {
    const items = await this.spFi.web.lists.getByTitle("Notes").items();
    console.log(items);

    const newItem = await this.spFi.web.lists.getByTitle("Notes").items.add({
      Title: "New Note",
    });
    console.log("New item added:", newItem);
  }

  public render(): React.ReactElement<ICreateNoteProps> {
    const {} = this.props;

    return <div>Test</div>;
  }
}

i need to insert the data to the list called Notes