Is Images a custom component?

What is getImageSrc?

Yes and getImageSrc is an abstraction component for fetching an default image from the server in case the required image is not set in the server.

This is the payload

and it should be
formData.set('file', e.target.files[0]);
instead of
formData.set('file', URL.createObjectURL(e.target.files[0]));

I forgot to remote it

What is ClientSide.

Also can you confirm your api route is even getting the image data? Last i remember i had problems sending an image though formdata and had to instead upload first and send the link instead.
(I know you might be doing extra stuff on backend, im just confirming for now)

I think its another abstraction for fetching data, one function is for ClientSide and nother for ServerSide.

This is the ClientSide function

export const ClientSide = (
    props,
    enabled = false,
    successError,
    debounceDelay,
) => {
    const { url, method, data, headers, params } = props;
    const [apiData, setApiData] = useState(false);
    const [isLoading, setLoading] = useState(true);
    const [error, setError] = useState(false);

    const resetData = () => {
        setApiData(false);
        setLoading(true);
        setError(false);
    };

    const apiCall = useCallback(() => {
        setLoading(true);
        axios({
            url: url,
            method: method,
            data: data,
            params: params,
            headers: { ...headers },
        })
            .then((response) => {
                setApiData(response);
                setLoading(false);
                if (successError) {
                    successError(response);
                }
            })
            .catch((error) => {
                setError(error);
                setLoading(false);
                if (successError) {
                    successError(error);
                }
            });
    }, [url, method, data, params, headers, successError]);

    const onAction = () => {
        apiCall();
    };

    useEffect(() => {
        let timer;
        if (enabled) {
            timer = setTimeout(() => {
                apiCall();
            }, debounceDelay);
        }
        return () => {
            clearTimeout(timer);
        };
    }, [url, method, enabled, debounceDelay]);

    return [isLoading, apiData, error, onAction, resetData];
};

.

The second part too

I don't have backend access, is it possible to check from frontend side?

Well internal server most probably mean there is an error returning from the api