React: re-define ref when component change

Question

I have a mapping between index with component:

const mappingComponent = [
    {
        index: 0,
        component: Information,
    },
    {
        index: 1,
        component: Data,
    },
    {
        index: 2,
        component: UseCase,
    },
    {
        index: 3,
        component: Categorization,
    },
    // ...
];

Inside my Component:

const stepRef = useRef<StepRef>(null);

const renderUI = () => {
    const Component = mappingComponent.find((mc) => mc.index === step)?.component;
    if (!Component) return null;
    return (
        <Component
            ref={stepRef}
        />
    );
};

The interface:

export interface StepRef {
    onNext: () => void;
}

On each child component, I use fowardRef and useImperativeHandle:

useImperativeHandle(
    ref,
    () => ({
        onNext: () => {
           // TODO
        },
    }),
    [],
);

Step is a number state to decide which component is rendered

The proplem is when the step change, the stepRef.current become null. How can I make the ref have values again?