Rollup preserveModulesRoot not working as expected

I feel like the preserveModulesRoot option while using preserveModules does not work as it should. Let's say I have a src/index.ts and a bunch of src/components/CompXYZ.tsx files. What I expect to happen with the preserve modules and root set to src is for my build to look like this:

dist
-- index.js
-- index.map.js
-- index.d.ts
-- components
---- CompA.js
---- CompA.map.js
---- CompA.d.ts
---- CompB.js
---- CompB.map.js
---- CompB.d.ts

But what actually happens is that the src prefix is stripped only from the input.ts file and no other so the build ends up looking like this:

dist
-- index.js
-- index.map.js
-- index.d.ts
-- components
---- CompA.d.ts
---- CompB.d.ts
-- src
---- components
------ CompA.js
------ CompA.map.js
------ CompB.js
------ CompB.map.js

So it looks like preserveModulesRoot only affect modules mentioned in input option but if I was to manually write out all the modules one by one, I can just place them where I want instead of using the preserveModulesRoot. What's the point of this setting if not to set root for all additional modules created with preserveModules enabled?

Here is my rollup.config.js

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';

export default {
    input: 'src/index.ts',
    output: {
        dir: 'dist',
        format: 'esm',
        sourcemap: true,
        preserveModules: true,
        preserveModulesRoot: 'src',
    },
    plugins: [
        peerDepsExternal(),
        resolve(),
        commonjs(),
        typescript(),
        postcss(),
        image(),
    ],
};