How to use the ra-core.useDataProvider function in ra-core

const BulkExportButton: FunctionComponent = ({
    resource,
    selectedIds,
    onClick,
    label = 'ra.action.export',
    icon = defaultIcon,
    ...rest
}) => {
    const exporter = useContext(ExporterContext);
    const dataProvider = useDataProvider();
    const notify = useNotify();
    const handleClick = useCallback(
        event => {
            exporter &&
                dataProvider
                    .getMany(resource, { ids: selectedIds })
                    .then(({ data }) =>
                        exporter(
                            data,
                            fetchRelatedRecords(dataProvider),
                            dataProvider,
                            resource
                        )
                    )
                    .catch(error => {
                        console.error(error);

const ExportButton: FunctionComponent = ({
    exporter,
    sort,
    filter = defaultFilter,
    maxResults = 1000,
    resource,
    onClick,
    label = 'ra.action.export',
    icon = DefaultIcon,
    ...rest
}) => {
    const dataProvider = useDataProvider();
    const notify = useNotify();
    const handleClick = useCallback(
        event => {
            dataProvider
                .getList(resource, {
                    sort,
                    filter,
                    pagination: { page: 1, perPage: maxResults },
                })
                .then(({ data }) =>
                    exporter
                        ? exporter(
                              data,
                              fetchRelatedRecords(dataProvider),
                              dataProvider
                          )

const ReferenceListDatagrid = (props: ReferenceListDatagridProps) => {
  const recordID = props.recordID;
  const redirect = useRedirect();
  const [rows, setRows] = useState([]);
  const dp = useDataProvider();
  useEffect(() => {
    const filter: any = {};
    filter[`${props.refResourceFieldName}_eq`] = recordID;
    dp.getList(props.resource.endpoint, {
      filter,
      pagination: {
        page: 1,
        perPage: 10,
      },
      sort: {
        field: 'id',
        order: "ASC",
      }
    }).then(res => {
      setRows(res?.data || []);
    })