How to define the signature of a function that returns an object while passing props using interfaces?

Question

I am working with (.ts) and I have defined a component where my major stylings are. I am importing an another component inside of it where I want to pass these styles as props.

The styles I made into the parent component is into the form of the function which takes 1 parameter and switch that parameter as per the different cases i gave inside of it.

Here's my parent component

export default function ParentComponent () {
const myStyles = (type : string) => {
switch (type) {
case 'typeA' : return {
borderRadius : '20px',
border : '1px solid #000',
color : 'yellow'
};
case 'typeB' : {
borderRadius : '10px',
border : '1px solid #fff',
color : 'pink' }}};

return (
<IconButton 
sx = {myStyles('typeA')}
>
<OtherComponent 
type = {myStyles('typeB')}
/> // this is my other component which I defined seperately and using this function as props over there
)}

// my other component

imports ...

interface Props {
myStyles : (type : string) => void;
}

export default function OtherComponent (props : Props) {
return (
<IconButton 
 sx = {props.myStyle('typeB')}
/>
)}

// it is throwing me an error

Type '{ borderRadius: string; border: string; color: string; }' provides no match for the signature '(type: string): void'.

// what type of signature should I provide for a function which returns styles wrapped inside an object, just like i mentioned above into 'myStyles()'..

the .ts is giving me the warning as myStyle : (type : string) => void; is not a valid signature of this type of function.

I tried changing signature to

myStyle : (type: string) => {
borderRadius : string;
border : string;
color : string
}; inside of interface Props but it didn't work as well.

All suggestions are welcome and would be highly appritiated.