React rerender full tree of the component

I have a component:

export const Filters: FC = observer(() => (
    <div className={`filters ${viewModel.isDragged ? 'filters--dragged' : ''} ${!viewModel.isOpened ? 'filters--collapsed' : ''}`}
         style={viewModel.position}>
        <FiltersHeader/>
        <FiltersBody/>
    </div>
));

This component is decorated with observer from mobx-react-lite. Field position is decorated with @observable decorator from mobx package. position is consist of field left: number and top: number.

I want to drag this component. And to achieve it I reinisialize position when user triggers mousemove.

The problem is <FiltersHeader/> and <FiltersBody/> not small components, it takes a while to render them. And each time I change viewModel.position React rerender entire tree. Not only FiltersHeader and FiltersBody, also their children and their children, etc.

Why does React do that? I mean, FiltersHeader has no properties. React should not rerender the component again if its properties did not change. Or should it?

This code works the same

export const Filters: FC = () => {
    const [position, setPosition] = useState(viewModel.position);
    useEffect(() => {
        reaction(() => viewModel.position, value => setPosition(value));
    }, []);
    return (
        <div className={`filters ${viewModel.isDragged ? 'filters--dragged' : ''} ${!viewModel.isOpened ? 'filters--collapsed' : ''}`}
             style={position}>
            <FiltersHeader/>
            <FiltersBody/>
        </div>
    );
}