React.forwardRef complaining TypeError: Component is not a function

Question

Errors or warning in my pages are handled by ValidationState, a component that takes validationResults and checks if a specific field msgKey has a message to display.

This component has to receive a ref that will enable me to scroll towards it if it contains a message. Passing the ref, I received an error saying that I must use forwardRef, but I can't get it to work as it says: TypeError: Component is not a function

ValidationState.js

import {validation} from "./validationResult";
import {Box} from "@mui/material";

const sxDef= {
    error: {
        color: '#ca0000',
        width: '100%',
        backgroundColor: '#ca000014',
        padding: '4px',
        borderBottom: '1px dotted'
    },
    warn: {
        color: '#d59f00'
    },
    info: {
        color: '#333333'
    },
}

const ValidationState = React.forwardRef((props, ref) => {
    const {validationResult, msgKey, sx} = props

    console.log( 'executing ValidationState' )

    const state = validationResult.getState(msgKey)
    if(!state)
        return <div></div>

    const severityClass = state.level === validation.ERROR ? sxDef.error : state.level == validation.WARNING ? sxDef.warn : sxDef.info
    return (
        <Box sx={[sx, severityClass]} ref={ref}>
            {state.message}
        </Box>
    )

})

export default ValidationState

I wanted to enable scrolling to the last error message by passing it a ref created by the parent component

IssueFieldsForm.js

export default function IssueFieldsForm(props) {
    const [scrollTopRef, setScrollTop] = useScrollIntoView()
///...
return (
           <Grid item>
                <ValidationState validationResult={validationState} msgKey='edit.errors.entityNotSelected'
                                 sx={sx.validationMessage} ref={scrollTopRef}/>
                <MapSearch
                    onEntitySelected={onMarkerSelected}
                    onMarkersChanged={onMarkersChanged}
                    onMarkerSelected={onMarkerSelected}
                    onIssueDataChanged={onIssueDataChanged}
                    selected={issue.entity}
                    bounds={issue.maps}
                    markers={markers}
                />
            </Grid> 
  )
}

Where the hook looks like this:

hooks.js

export function useScrollIntoView() {
    const htmlElRef = useRef(null)
    const scrollIntoView = () => {
        if( !htmlElRef.current )
            return

        htmlElRef.current.scrollIntoView()
    }

    return [htmlElRef, scrollIntoView]
}