forwardRef set via observer is not working version "mobx-react-lite": "^2.0.6",

[mvudugula]

import React, { useState, useEffect, FC, createRef, memo, useRef, useImperativeHandle } from 'react'; import Styles from './accommodation-list.scss';

import { observer } from 'mobx-react-lite'; import AddonList from '../shared/addon-list/addon-list';

const AccommodationList = ( {ref} :{ref:React.Ref} ) => { const refs = useRef(null); useImperativeHandle(ref, () => ({ submitForm: () => { refs.current.submitForm(); } }));

return (
    <>
        <div className="accommodations-container">
            {store.booking.accommodations &&
                store.booking.accommodations.map((accommodation, index) => (
                    <div className="accommodation-content" key={index}>
                        <div className="title">{accommodation.name}</div>
                        <div className="accommodation-body">

<AddonList ref={refs} addons={accommodation.addons.linked}

                                />
                        </div>

                    </div>

                ))}
        </div>

        <style jsx>{Styles}</style>
    </>
);

};

export default observer(AccommodationList, { forwardRef: true });

[danielkcz]

Please provide reproduction with eg. CodeSandbox.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.