Site icon Hip-Hop Website Design and Development

Gutenberg: How to display meta field data in the block frontend (save function)

I have some legacy meta fields in my post that I would like to display in my block. I found a documentation for settings meta fields but not how to display them. So I tried this:

export default function save( { attributes } ) {

    const blockProps = useBlockProps.save();

    const postType = useSelect(
        ( select ) => select( 'core/editor' ).getCurrentPostType(),
        []
    );

    const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );

    const game_meta = meta[ '_shortscore_game' ];

    return (
        <p { ...blockProps } >
            <h2><game_meta/></h2>
        </p>
    );
}

I get this error:

Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following
reasons: 1. You might have mismatching versions of React and the
renderer (such as React DOM) 2. You might be breaking the Rules of
Hooks 3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to
debug and fix this problem.

What is the problem? It happens because of

const postType = useSelect(
    ( select ) => select( 'core/editor' ).getCurrentPostType(),
    []
);

But why?