How to get field values in a component for a block in Lexical editor?

[crisp hearth]

https://payloadcms.com/docs/fields/blocks#customizing-the-way-your-block-is-rendered-in-lexical
Documentation specifies passing Block path, however I dont see an example or recommended way of getting the block field props into the below component example.

admin: {
  components: {
    Block: {
      path: "@/blocks/Twitter/TwitterField#default",
    },
  },
},

const TwitterField: FC<any> = (props) => {
  const { field, path, value } = props;
  //  console.log(props);
  // was testing this out, but seems like props here include everything
  return (
    <div
      style={{
        padding: "20px",
        // backgroundColor: "#f0f0f0",
        borderRadius: "5px",
      }}
    >
      <BlockEditButton />
      <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
        Twitter/X Post Preview (full preview visible when published)
      </div>
      <div style={{ fontStyle: "italic", fontSize: "0.9em" }}>
        {field?.tweetURL ||
          (field?.tweetId
            ? `Tweet ID: ${value.tweetId}`
            : "No tweet specified")}
      </div>
    </div>
  );
};

[rough beacon]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• Blocks Field - Admin Options - Customizing the way your block is rendered in Lexical
• Lexical Migration - Migrating lexical data from old version to new version
• Rich Text Editor - Extending the lexical editor with Features - Features: The Building Blocks
• Rich Text Editor - TypeScript - Automatic type generation

Community-Help:

• Has anyone added Text Color to the RichText input?
• form builder plugin: forms are created but aren't accessed to render on frontend

[crisp hearth]

i managed to get this working. had to use react hooks to get the data from the form fields and reduce/flatten using reduceFieldsToValues

"use client";

import React, { FC } from "React";
import { BlockEditButton } from "@payloadcms/richtext-lexical/client";
import { useAllFormFields } from "@payloadcms/ui";
import { reduceFieldsToValues } from "payload/shared";

const TwitterField: FC<any> = () => {
  const [fields] = useAllFormFields();
  const formData = reduceFieldsToValues(fields, true);

  return (
    <div
      style={{
        padding: "20px",
        borderRadius: "5px",
      }}
    >
      <BlockEditButton />
      <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
        Twitter/X Post Preview (full preview visible when published)
      </div>
      <div style={{ fontStyle: "italic", fontSize: "0.9em" }}>
        {formData?.tweetURL ||
          (formData?.tweetId
            ? `Tweet ID: ${formData.tweetId}`
            : "No tweet specified")}
      </div>
    </div>
  );
};