Can I use HOC programming style on a functional component? - reactjs

Question

I have a class component that's empowered with the HOC withRouter, and connect() to have dispatch available in props
export default withRouter(connect()(MyComponent));
This component is coded as a class component, now, I changed the component to a functional component:
Changed the function header from class "MyComponent expands..." to "const MyComponent = props => {..."
Changed the way the state is created, by using "const [state, setState] = useState(..."
Instead of coding componentDidMount to perform initial operations, I use
useEffect(() => {
getData()
}, []);
Where getData is:
const getData = props => {
const getDocument = async () => {
const {
dispatch,
location: { search }, // Here I get an error, search and
match: { params }, // params are undefined
} = props;
...
}
Changed every function definition, from "handleSuccessAction = message => {..." to "const handleSuccessIndex = response => {..."
Changed all reference to functions from "this.myFunction();" to "myFunction()"
And leaved export default withRouter(connect()(MyComponent)) as is
Begin EDIT:
here is the whole code, once turned into a functional component
------------- all imports ------------------
const DocumentPreview = props => {
const [state, setState] = useState({
document: {
documentType: '',
name: '',
file: {
fileUrl: '',
filename: ''
},
},
file: {
fileUrl: '',
filename: ''
},
});
useEffect(() => {
getDocument();
}, []);
const getDocument = async () => {
const {
dispatch,
location: { search },
match: { params },
} = props;
const options = parseUrlParams(search);
setState({ onRequest: true });
showDocumentPreviewRequest(params.id, {
employeeId: options.employee,
dispatch,
successCallback: handleSuccessIndex
});
};
const handleSuccessIndex = response => {
const { data } = response;
const document = camelCaseRecursive(data);
const file = document.fileInfo;
setState({
document,
file,
onRequest: false
});
};
const { onRequest, document, file, modalBody, modalShow, modalTitle, defaultModalShow } = state;
const { pendingToApprove, workflowRequest } = document;
return (
<>
------- Do my stuff -------------
</>
);
}
export default withRouter(connect()(DocumentPreview))
End EDIT
Why do I get this error?, am I doing it wrong?
I'm changing it to a functional component since I have to load the component on a modal, and as I won't be using router and render props, I think I can get this props by using hooks
Rafael